Webpack + Material UI會導致客戶端和服務器呈現時出現css錯誤和非相同的行爲

當我使用Avatar組件material-ui由webpack dev服務器運行時，客戶端上的樣式無法正確呈現。在服務器上他們正在渲染。對於無效校驗Webpack + Material UI會導致客戶端和服務器呈現時出現css錯誤和非相同的行爲

控制檯錯誤： (client) ;display:-webkit-box,-moz-box,-ms-flexbo (server) ;display:-webkit-box; display: -moz-box;

正如你所看到的，客戶端display樣式屬性不被;但,分離。

有什麼建議嗎？

感謝

來源

2016-12-16 Idan Gozlan

材料UI庫依賴於瀏覽器的userAgent正確呈現每個組件的正確CSS。

在您的案例中，material-ui使用正確的css代替-web-kit法規遵從性瀏覽器。而且你正在做服務器端渲染;您的組件在服務器時間不知道客戶端要從哪個瀏覽器請求頁面。所以它保留了所有的CSS前綴，以確保他至少能夠正確使用其中的一個。

解決方案非常簡單，只需將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>

來源

2017-06-19 17:54:13 CESCO

Webpack + Material UI會導致客戶端和服務器呈現時出現css錯誤和非相同的行爲

回答

相關問題