material-ui 客户端警告:道具“样式”不匹配

Posted

技术标签:

【中文标题】material-ui 客户端警告:道具“样式”不匹配【英文标题】:material-ui client side warning: Prop `style` did not match 【发布时间】:2018-03-11 17:28:51 【问题描述】:

我正在使用服务器端渲染设置 react-redux 应用程序,而对于 UI,我正在使用 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')
);

如果您需要任何其他信息,请告诉我。提前谢谢!!!

【问题讨论】:

我在 Next.js 中遇到了同样的问题。见***.com/a/58626730/2728710 【参考方案1】:

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

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

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

要尝试解决此问题,请将userAgent 设置为服务器在服务器渲染应用程序之前在请求中收到的那个。见the material-ui docs on server rendering。您可以将 req.headers['user-agent'] 传递给您传递给 MuiThemeProvider 的 muiTheme 对象,或将其设置在全局 navigator 对象上。

【讨论】:

谢谢!你的回答很有帮助。但是,我无法弄清楚如何为反应服务器渲染设置全局导航器对象。以另一种方式进行操作使我的代码变得混乱。

以上是关于material-ui 客户端警告:道具“样式”不匹配的主要内容,如果未能解决你的问题,请参考以下文章

Material-UI 滑块未将名称道具暴露给 Formik

警告:道具 `className` 不匹配。当使用带有语义-ui-react 的样式化组件时

我如何设置作为prop传递的material-ui图标的样式

在样式化组件中设置 React 组件道具

react-select:如何解决“警告:道具`id`不匹配”

React 无法识别传递给 Material UI 中样式化组件的道具