Выберите компонент, теряющий CSS при обновлении страницы

Question

Я создаю небольшой веб-сайт для комнаты отдыха моей компании, написанный на React, и использую Gatsby для перевода приложения в статический контент.

Я обнаружил, что когда я обновляю страницу, где находится мое меню, элементы Select из Material-UI теряют свой CSS.
Ничто другое на странице не теряет своего стиля, включая компоненты MenuItem из Material-UI, которые я использую для заполнения компонента Select параметрами.

Я использую styled-components, чтобы настроить размер / положение / ощущение компонентов Select, и я попытался удалить стилизацию, чтобы увидеть, была ли это проблема, но это не повлияло на поведение.
Если 1 - я захожу на веб-сайт и 2 - перехожу на страницу меню, которую CSS правильно отображает, , но , если обновить страницу, она ломает компонент Select, что приводит к потере CSS.
+ Кроме того, если я перехожу прямо на страницу, это нарушает CSS-код компонента Select.

Я также заметил некоторые ошибки в Firefox, когда страница обновляется, говоря, что она игнорирует наборы правил из-за плохих селекторов. Ошибки можно увидеть по ссылке ниже.

Выберите компонент Styled :

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 Issue : https://imgur.com/a/GKL6D2t
Изображение Firefox CSS Warnings : https://imgur.com/cATTdZR

Answer 1

Есть ли условные операторы в методе рендеринга? Я тоже столкнулся с этой проблемой, но решил ее путем замены логической логики для скрытого компонента.

до

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

после

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

Answer 2

У вас есть проблема с SSR, когда вы перезагружаете страницу, что происходит, если она правильно вводит только стиль, очевидно, что вы сделали, это установили material-ui и ожидаете, что он будет работать, то, что вы должны сделать, это внедрить material-ui's стиль, по-видимому, требует некоторой конфигурации с 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/, и у вас больше не будет этой проблемы.