Я создаю небольшой веб-сайт для комнаты отдыха моей компании, написанный на 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