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组件在刷新页面后会中断。

发行图片：https://imgur.com/a/GKL6D2t
Firefox CSS警告图片：https://imgur.com/cATTdZR

Answer 1

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

Answer 2

render方法中是否有条件语句？我也遇到了这个问题，但通过将布尔逻辑替换为“隐藏”组件来解决。

之前

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

之后

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

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

2 个答案: