Material-UI: how to properly set userAgent for server-side rendering

Question

I get this warning:

Material-UI: userAgent should be supplied in the muiTheme context for server-side rendering 

with the following server-side rendering setting, which I am doing wrong:

  match({routes: R(), location}, (error, redirectLocation, renderProps) => { if (error) { console.error("error: "+ error) } else if (redirectLocation) { console.error("redirect to " + redirectLocation) } else if (renderProps) { const theme = getMuiTheme({userAgent: "all"}) page = ReactDOMServer.renderToStaticMarkup( <MuiThemeProvider muiTheme={theme}> <Provider store={store}> <RouterContext {...renderProps} /> </Provider> </MuiThemeProvider> ) } else { console.error("location nof found: '"+ location +"'") } }) 

Answer 1

In this Razzle Material UI Styled Example Project , I set it this way:

server.js :

 renderToString(<Application userAgent={request.headers['user-agent']} />) 

client.js :

 render(<Application userAgent={navigator.userAgent} />, document.getElementById('root')) 

Main.js :

 class Main extends Component { constructor(properties, context) { super(properties, context) this.muiTheme = getMuiTheme({ userAgent: properties.userAgent }) } render() { return ( <MuiThemeProvider muiTheme={this.muiTheme}></MuiThemeProvider> ) } } 

This works well, and I think that is also correct.