刷新页面时选择组件丢失它的css

Question

我正在为我公司的休息室构建一个用 React 编写的小型网站，并使用 Gatsby 将应用程序转换为静态内容。

我发现当我刷新菜单所在的页面时，Material-UI 中的 Select 元素会丢失其 CSS。
页面中的任何其他内容都不会丢失其样式，包括 Material-UI 中的 MenuItem 组件，我使用它来使用选项填充 Select 组件。

我正在使用 styled-components 自定义 Select 组件的大小/位置/感觉，我尝试删除样式以查看是否是问题所在，但它不影响行为。
如果 1- 我登录网站并 2- 导航到菜单页面，CSS 会正确呈现，但是如果刷新页面，它会破坏 Select 组件，导致它丢失它的 CSS。
+ 另外，如果我直接浏览到页面，它会破坏 Select 组件的 CSS。

我还注意到 Firefox 中的一些错误，当页面被刷新时说它由于错误的选择器而忽略了规则集。可以在下面的链接中看到错误。

选择组件样式：

const StyledSelect = styled(Select)`
width: 80%;
margin-right: 10%;
margin-left: 10%;
margin-top: 3%;
margin-bottom: 3%;`

选择 render() 中使用的组件：

<StyledSelect
 multiple={props.isMultiple}
 value={props.value}
 name={props.name}
 onChange={props.handleChange}
>
 {props.items.map(item => (
  <MenuItem key={item._id} value={item}>
   {item.Name}
  </MenuItem>
 ))}
</StyledSelect>

我希望CSS即使在页面刷新时也能保持不变，但实际结果是Select组件在页面刷新后中断。

问题的 Gif：https://imgur.com/a/GKL6D2t
Firefox CSS 警告图片：https://imgur.com/cATTdZR

Answer 1

您的 SSR 有问题，当您重新加载页面时，它只会正确注入样式，显然您所做的是安装 material-ui 并期望它工作，您应该做的是注入 material-ui样式，显然需要使用react-jss 进行一些配置，最近material-ui 并且由于每个人都抱怨的类似问题，他们提供了有关如何解决此问题的示例，其中一个示例是 gatsby 项目https://github.com/mui-org/material-ui/tree/master/examples/gatsby，如果您没有时间，你可以安装一个 gatsby 插件https://www.gatsbyjs.org/packages/gatsby-plugin-material-ui/，你就不会再遇到这个问题了。

Answer 2

render 方法中有条件语句吗？我也遇到了这个问题，但通过替换 Hidden 组件的布尔逻辑来解决。

之前

return(
    {isDeskopDisplay && <MyComponent/>}
)

之后

return(
<Hidden mdUp>
    <MyComponent/>
</Hidden>
)

Answer 3

将以下代码添加到 babel 文件 (babel.config.js)

module.exports = {
    presets: ["next/babel"],
    plugins: [<br/>
        ["styled-components", { "ssr": true, "displayName": true, "preprocess": 
false }],"inline-react-svg"]};