![](/img/trans.png)
[英]Warning: Prop `className` did not match ~ Material UI css arbitrarily breaks on reload
[英]material-ui client side warning: Prop `style` did not match
我正在使用服务器端渲染来设置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')
);
如果您需要其他任何信息,请告诉我。 提前致谢!!!
material-ui生成带有供应商前缀的内联样式。 它仅生成用户浏览器所需的供应商前缀。
global.navigator.userAgent = global.navigator.userAgent || 'all';
在服务器上,它变为userAgent = 'all'
…因此,material-ui始终添加所有供应商前缀。 然后,在浏览器上仅添加所需的供应商前缀,在现代浏览器中通常为0。这就是区别所在。
要尝试解决此问题,请将userAgent
设置为服务器在呈现应用程序之前在请求中收到的服务器。 请参阅有关服务器渲染的material-ui文档 。 您可以通过req.headers['user-agent']
你传递给muiTheme对象MuiThemeProvider
,或将其设置一个全球性的navigator
对象。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.