Webpack + Material UI가 클라이언트 및 서버 렌더링에서 CSS 오류 및 비 동일 동작을 야기 함

Question

material-ui dev 서버가 실행중인 Avatar 구성 요소를 사용할 때 클라이언트의 스타일이 올바르게 렌더링되지 않습니다. 서버에서 제대로 렌더링됩니다. 잘못된 체크섬

콘솔 오류 : 당신이 볼 수 있듯이 (client) ;display:-webkit-box,-moz-box,-ms-flexbo (server) ;display:-webkit-box; display: -moz-box;

, 클라이언트 display 스타일 속성은 ;이 아니라 ,로 구분되지 않습니다.

제안 사항?

감사

Answer 1

재료 UI 라이브러리는 제대로 각 구성 요소에 대한 올바른 CSS를 렌더링하는 브라우저의 userAgent에 따라 달라집니다.

material-ui는 -web-kit 호환 브라우저에 맞는 CSS를 사용하고 있습니다. 그리고 서버 사이드 렌더링을하고 있기 때문에; 당신은 서버 시간에 클라이언트가 페이지를 요청하고있는 브라우저를 모른다. 따라서 모든 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>