Webpack + Material UI导致​​客户端和服务器呈现上的css错误和不相同的行为

Question

当我使用由Avatar开发服务器运行的material-ui webpack组件时，客户端上的样式无法正确呈现。在服务器上，它们正确呈现。

无效校验和的控制台错误： (client) ;display:-webkit-box,-moz-box,-ms-flexbo (server) ;display:-webkit-box; display: -moz-box;

正如您所看到的，客户端display样式属性未被;分隔，而是,。

有什么建议吗？

由于

Answer 1

材质UI库依赖于浏览器userAgent为每个组件正确呈现正确的css。

在您的情况下，材料-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>