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

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

我发现，当我刷新菜单所在的页面时，Material-UI中的Select元素会丢失其CSS。
页面上的所有内容都不会失去其样式，包括MenuItemMaterial-UI中用于填充选项的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