2

I'm getting this warning : 

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

with the following server side rendering setup, what am I 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 +"'")
    }
    })
Max L.
  • 9,774
  • 15
  • 56
  • 86
  • 1
    possible duplicate of http://stackoverflow.com/questions/35481084/react-starter-kit-and-material-ui-useragent-should-be-supplied-in-the-muitheme – Paul S Jan 11 '17 at 17:12
  • 1
    I am having the same exact problem. From material-ui documentation, it seems that the "all" user agent should work but it doesn't. Also, double check that your environment is the same for server and client as described in their documentation. http://www.material-ui.com/#/get-started/server-rendering – Chris Mar 29 '17 at 08:22

1 Answers1

2

In this Razzle Material UI Styled Example project I am setting 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>
        )
    }
}

It works well and I think it is correct too.

Erik Engi
  • 402
  • 3
  • 10