material-ui client side warning: Prop `style` did not match

Question

I am working on setting up a react-redux app using server side rendering and for UI i am using react material-ui. I am facing below warning on initial rendering of the app

Below are the project files

server file index.js

'use strict';

import express from 'express';
import webpack from 'webpack';
import path from 'path';
import config from '../webpack.config.js';
import chalk from 'chalk';
import bodyParser from 'body-parser';
import handleRender from '../client/src/utils/handleRender.js';

// Tell any CSS tooling (such as Material UI) to use all vendor prefixes if the
// user agent is not known.
global.navigator = global.navigator || {};
global.navigator.userAgent = global.navigator.userAgent || 'all';

const port = 3000;
const app = express();

webpack(config).run((err, results) => {
  // console.log(err);
  // console.log(results);
});
// Middlewares
app.use(express.static(path.resolve(__dirname, '../build'), { maxAge: 30 * 60 * 60 * 24 * 1000 }));
app.use(bodyParser.json());
app.use(handleRender);

// Trigger server
app.listen(port, function(err) {
  if (err) {
    console.log(chalk.red("Whoa!!! Server crashed..."), err);
  } else {
    console.log(chalk.green("YAY!!! Server is up and running..."));
  }
});

client side index.js

'use strict';

import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import { hydrate } from 'react-dom';
import { Provider } from 'react-redux';
import { renderRoutes } from 'react-router-config';
import configureStore from './store';
import App from './containers/App.js';
import routes from './routes/index.js';

hydrate(
  <Provider store={configureStore()}>
    <BrowserRouter>
      {renderRoutes(routes)}
    </BrowserRouter>
  </Provider>,
  document.getElementById('root')
);

Please let me know if you need any other information. Thanks in advance!!!

Answer 1

material-ui generates inline styles with vendor prefixes. It only generates the vendor prefixes that are necessary for the user's browser.

global.navigator.userAgent = global.navigator.userAgent || 'all';

On the server, this becomes userAgent = 'all' … so material-ui always adds all vendor prefixes. Then on the browser it only adds the vendor prefixes that it needs, which in modern browsers is often 0. That's where the difference comes from.

To attempt to fix that, set the userAgent to the one the server received in the request before server-rendering the app. See the material-ui docs on server rendering. You can pass the req.headers['user-agent'] on the muiTheme object that you pass to MuiThemeProvider, or set it on a global navigator object.