Select 组件在刷新页面时丢失 css

Question

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

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

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

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

Select 组件样式:

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

Select 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 , if you do not have time for that you can just install a gatsby plugin https://www.gatsbyjs.org/packages/gatsby-plugin-material-ui/，您将不会再遇到此问题。

Answer 2

render方法中是否有条件语句？我也运行遇到了这个问题，但通过换出隐藏组件的布尔逻辑解决了。

之前

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"]};

Select 组件在刷新页面时丢失 css

Select component losing it's css when page is refreshed

reactjs

material-ui

gatsby

styled-components