[英]material-ui client side warning: Prop `style` did not match
I am working on setting up a react-redux app using server side rendering and for UI i am using react material-ui. 我正在使用服务器端渲染来设置react-redux应用程序,对于UI,我正在使用react material-ui。 I am facing below warning on initial rendering of the app
我在应用的初始呈现时面临以下警告
Below are the project files 以下是项目文件
server file index.js 服务器文件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 客户端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!!!
提前致谢!!!
material-ui generates inline styles with vendor prefixes. material-ui生成带有供应商前缀的内联样式。 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. 在服务器上,它变为
userAgent = 'all'
…因此,material-ui始终添加所有供应商前缀。 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. 然后,在浏览器上仅添加所需的供应商前缀,在现代浏览器中通常为0。这就是区别所在。
To attempt to fix that, set the userAgent
to the one the server received in the request before server-rendering the app. 要尝试解决此问题,请将
userAgent
设置为服务器在呈现应用程序之前在请求中收到的服务器。 See the material-ui docs on server rendering . 请参阅有关服务器渲染的material-ui文档 。 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. 您可以通过
req.headers['user-agent']
你传递给muiTheme对象MuiThemeProvider
,或将其设置一个全球性的navigator
对象。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.