Webpack + Material UI leads to css errors and non same behavior on client and server rendering

Question

When I'm using Avatar component of material-ui running by webpack dev server, the styles on client are not rendering correctly. on server they are rendering correctly.

Console error for invalid checksum: (client) ;display:-webkit-box,-moz-box,-ms-flexbo (server) ;display:-webkit-box; display: -moz-box;

As you can see, the client display style attribute is not separated by ; but with ,.

Any suggestions?

Thanks

Answer 1

Material UI library depends on the browser userAgent to properly render the correct css for each component.

In you case material-ui is using the right css for a -web-kit compliance browser. And since you are doing server side rendering; you components, at server time, do not know which browser the client is requesting the page from. So it keeps all css prefixes just to make sure he get at least of one of them right.

The solution is quite simple, just pass the userAgent http request header to the Material provider. If you are using Express, here its an example:

import getMuiTheme from "material-ui/styles/getMuiTheme"
import MuiThemeProvider from "material-ui/styles/MuiThemeProvider"


<MuiThemeProvider muiTheme={getMuiTheme({ userAgent: req.headers["user-agent"] })}>
    <StaticRouter location={url} context={{}}>
        <ReduxProvider store={store}>
            <Router userAgent={userAgent} />
        </ReduxProvider>
    </StaticRouter>
</MuiThemeProvider>