React Starter Kit and Material UI: userAgent should be supplied in the muiTheme context for server-side rendering
When using Material-UI with server rendering, we must use the same environment for the server and the client. This has two technical implications.
as you seen on MaterialUI documentation page
You need to provide the same user-agent for both server and browser contexts as you seen it in documentation, but, I strongly discourage you to provide a "all" user-agent, since you will serve a lot of unnecessary code to your end-user.
Instead you can easily follow MaterialUI doc and pass user-agent value contained in http request headers.
With an express or koa server
global.navigator = global.navigator || {};global.navigator.userAgent = req.headers['user-agent'] || 'all';
I just checked it has been added to the ReactStarterKit (not tested myself) in src/server.js
global.navigator = global.navigator || {};global.navigator.userAgent = global.navigator.userAgent || 'all';
This should fix it
import themeDecorator from 'material-ui/lib/styles/theme-decorator';import RaisedButton from 'material-ui/lib/raised-button';import getMuiTheme from 'material-ui/lib/styles/getMuiTheme';class MyComponent extends Component { render() { return (<RaisedButton label="Default" />); }}export default themeDecorator(getMuiTheme(null, { userAgent: 'all' }))(MyComponent);
This works for me. Add this to server.js
:
global.navigator = { userAgent: 'all' };
Then verify that you see multiple vendor prefixes used like in this screengrab showing -webkit
and -ms
both being used: