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'になります...ので、材料-UIは、常にすべてのベンダープレフィックスを追加します。ブラウザでは、必要なベンダープレフィックスだけを追加します。現代のブラウザでは、しばしば0になります。違いがどこから来るのでしょうか。

これを解決するには、アプリケーションをサーバーレンダリングする前に、サーバーが要求で受け取ったサーバーにuserAgentを設定します。 the material-ui docs on server renderingを参照してください。 MuiThemeProviderに渡すmuiThemeオブジェクトにreq.headers['user-agent']を渡すことも、グローバルnavigatorオブジェクトに設定することもできます。