Блог

При использовании Material-UI v4 с пользовательским CSS makeStyles/useStyle имел приоритет над медиа-запросами. Теперь с v5 и эмоциями кажется, что вам нужно дополнительно переопределить css медиа-запроса material-ui, поскольку он загружается после пользовательского css, имея приоритет над вашим собственным css.

На рисунке 1 показан дополнительный стиль, примененный для импорта { контейнера } из компонента «@material-ui/core « с помощью makeStyle, фиолетового цвета, и он находится сверху, поэтому заполнение всегда составляет 80 пикселей.

На рисунке 2 показан один и тот же контейнер, стилизованный под эмоции, фиолетовый-пользовательский css, а красный прямоугольник показывает css медиа-запроса пользовательского интерфейса для этого компонента, имеющего приоритет

Добавление медиа-запроса в css решает эту проблему, например, так

 <Container maxWidth="lg"
        css={css`
            margin-top: 80px;
            padding: 80px; 
            @media (min-width: 600px) {
                padding: 80px;
                color: yellow;
            }
        `}
        {...rest}>
        {children}
    </Container>
 

Изображение 3, с добавлением mediaquery ваш собственный mq теперь находится на вершине, имея приоритет.

Теперь мне просто интересно, является ли это ожидаемым поведением, что теперь нам нужно переопределить все медиа-запросы с помощью MUI, или в конфигурации есть что-то, что нам нужно сделать.

Кстати, одна конфигурация, обычно предлагаемая для этой настройки, уже существует

 <ThemeProvider theme={themeConfiguration}>
        <StyledEngineProvider injectFirst>
            <StylesProvider jss={jss}>
                <CssBaseline />