时间戳

首页 > 解决方案 > 刷新页面时选择组件丢失它的css

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

问题描述

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

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

我正在使用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

标签： reactjsmaterial-uigatsbystyled-components

解决方案

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

前

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

后

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

推荐阅读