material-ui客户端警告:Prop`style`不匹配

Question

我正在使用服务器端渲染设置react-redux应用程序,而我正在使用react material-ui.在初始呈现应用程序时,我面临以下警告

以下是项目文件

服务器文件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..."));
  }
});

客户端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')
);

如果您需要任何其他信息,请与我们联系.提前致谢!!!

Answer 1

material-ui生成带有供应商前缀的内联样式.它仅生成用户浏览器所需的供应商前缀.

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

在服务器上,这变成userAgent = 'all'......所以material-ui总是添加所有供应商前缀.然后在浏览器上它只添加它需要的供应商前缀,在现代浏览器中通常为0.这就是差异的来源.

要尝试解决此问题,userAgent请在服务器呈现应用程序之前将其设置为服务器在请求中收到的服务器.请参阅有关服务器渲染的material-ui文档.您可以传递传递给req.headers['user-agent']的muiTheme对象MuiThemeProvider,或将其设置在全局navigator对象上.