材料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>