Sass 网页包+；材质UI会导致css错误以及客户端和服务器呈现上的不同行为

当我使用由

webpack

dev服务器运行的

materialui

组件

Avatar

时，客户端上的样式呈现不正确。在服务器上，它们正在正确渲染

无效校验和的控制台错误：

（客户）；显示：-webkit框、-moz框、-ms-flexbo
（服务器）；显示：-网络工具包盒；显示器：-moz盒；

如您所见，客户机

显示
样式属性没有被
分隔但带有
，

有什么建议吗

感谢
材质UI库依赖浏览器用户代理为每个组件正确呈现css

在您的情况下，material ui为
-web kit
合规浏览器使用了正确的css。由于您正在进行服务器端渲染；在服务器时，您不知道客户端从哪个浏览器请求页面。所以它保留了所有的css前缀，只是为了确保至少有一个是正确的

解决方案非常简单，只需将userAgent http请求头传递给材料提供者。如果您使用的是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>

从“材质ui/styles/GetMuiteme”导入GetMuiteme
从“材质ui/样式/MuiThemeProvider”导入MuiThemeProvider
材质UI库依赖浏览器用户代理为每个组件正确呈现css

在您的情况下，material ui为
-web kit
合规浏览器使用了正确的css。由于您正在进行服务器端渲染；在服务器时，您不知道客户端从哪个浏览器请求页面。所以它保留了所有的css前缀，只是为了确保至少有一个是正确的

解决方案非常简单，只需将userAgent http请求头传递给材料提供者。如果您使用的是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>

从“材质ui/styles/GetMuiteme”导入GetMuiteme
从“材质ui/样式/MuiThemeProvider”导入MuiThemeProvider