Webpack + Material UIでCSSエラーが発生し、クライアントとサーバーのレンダリングで同じ動作をしません。

Question

のコンポーネントが、dev99サーバーで実行されている場合、クライアントのスタイルは正しく表示されません。サーバー上で正しくレンダリングされています。無効なチェックサムのための

コンソールエラー： (client) ;display:-webkit-box,-moz-box,-ms-flexbo (server) ;display:-webkit-box; display: -moz-box;

あなたが見ることができるように、クライアントdisplay style属性が;ではなく,で区切られていません。

提案がありますか？

おかげ

Answer 1

材質UIライブラリーは、適切に、各コンポーネントの正しいCSSをレンダリングするために、ブラウザのuserAgentに依存します。

material-uiは-web-kit準拠のブラウザで正しいCSSを使用しています。そして、サーバー側のレンダリングを行っているので、あなたはサーバー時に、クライアントがページを要求しているブラウザーを知りません。だから、すべてのCSS接頭辞を保持して、それらのうちの少なくとも1つを正しいものにするようにします。

解決策は非常に簡単です。ただ、userAgent httpリクエストヘッダーをMaterialプロバイダに渡すだけです。 Expressを使用している場合は、ここにその例を示します。

import getMuiTheme from "material-ui/styles/getMuiTheme" 
import MuiThemeProvider from "material-ui/styles/MuiThemeProvider" 


<MuiThemeProvider muiTheme={getMuiTheme({ userAgent: req.headers["user-agent"] })}> 
    <StaticRouter location={url} context={{}}> 
     <ReduxProvider store={store}> 
      <Router userAgent={userAgent} /> 
     </ReduxProvider> 
    </StaticRouter> 
</MuiThemeProvider>