Кастомные breakpoints

Breakpoints в MUI отвечают за адаптивность интерфейсов. Они позволяют задавать различные стили в зависимости от ширины экрана, что критично для построения отзывчивых веб-приложений. По умолчанию MUI предоставляет стандартный набор точек останова: xs, sm, md, lg, xl, однако часто возникает необходимость определить собственные, кастомные breakpoints под конкретный дизайн.

Определение кастомных breakpoints

Для изменения стандартных breakpoints необходимо модифицировать тему через объект createTheme. Пример кастомизации:

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  breakpoints: {
    values: {
      xs: 0,      // мобильные устройства
      sm: 480,    // маленькие планшеты
      md: 768,    // средние планшеты
      lg: 1024,   // десктоп
      xl: 1440,   // широкие экраны
      xxl: 1920   // сверхширокие экраны
    },
  },
});

В этом примере добавлен новый breakpoint xxl. Все стандартные компоненты MUI, использующие breakpoints, автоматически начнут поддерживать новую точку.

Использование кастомных breakpoints в стилях

MUI предоставляет удобные методы для работы с breakpoints через объект theme.breakpoints. Основные методы:

  • up(key) – применяет стиль от указанного breakpoint и выше.
  • down(key) – применяет стиль до указанного breakpoint включительно.
  • between(start, end) – применяет стиль между двумя breakpoint.
  • only(key) – применяет стиль только для указанного breakpoint.

Пример использования с кастомным breakpoint xxl:

import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';

const ResponsiveBox = styled(Box)(({ theme }) => ({
  backgroundColor: 'lightblue',
  [theme.breakpoints.up('xxl')]: {
    backgroundColor: 'darkblue',
  },
  [theme.breakpoints.between('lg', 'xl')]: {
    backgroundColor: 'green',
  },
  [theme.breakpoints.down('sm')]: {
    backgroundColor: 'pink',
  },
}));

В этом примере цвет фона меняется в зависимости от ширины экрана. С помощью кастомного breakpoint xxl можно управлять стилями на сверхшироких дисплеях.

Кастомные breakpoints в Grid и Stack

Система Grid MUI напрямую использует breakpoints для определения ширины колонок:

import Grid from '@mui/material/Grid';

<Grid container spacing={2}>
  <Grid item xs={12} md={6} lg={4} xxl={3}>
    <Box>Контент</Box>
  </Grid>
</Grid>

Здесь новый breakpoint xxl задаёт ширину колонки в 3/12 сетки для сверхшироких экранов. Аналогично кастомные breakpoints могут использоваться в компоненте Stack для управления направлением:

import Stack from '@mui/material/Stack';

<Stack
  direction={{
    xs: 'column',
    md: 'row',
    xxl: 'row-reverse'
  }}
  spacing={2}
>
  <Box>Элемент 1</Box>
  <Box>Элемент 2</Box>
</Stack>

Адаптивные темы с кастомными breakpoints

Можно создавать динамичные стили через функцию theme => ({}) внутри sx пропса:

<Box
  sx={(theme) => ({
    fontSize: 14,
    [theme.breakpoints.up('md')]: {
      fontSize: 18,
    },
    [theme.breakpoints.up('xxl')]: {
      fontSize: 24,
    },
  })}
>
  Текст с адаптивным размером
</Box>

Такой подход позволяет управлять любыми CSS-свойствами, используя кастомные точки останова, без создания отдельного styled-компонента.

Советы по работе с кастомными breakpoints

  • Необходимо соблюдать логику увеличения значений: xs < sm < md < lg < xl < xxl.
  • Для единообразного использования в проекте кастомные breakpoints рекомендуется хранить в отдельном файле темы.
  • Проверять поддержку breakpoints в компонентах, которые используют sx и styled, так как не все сторонние компоненты MUI могут автоматически учитывать новые точки.
  • Можно комбинировать стандартные и кастомные breakpoints для более тонкой адаптивной настройки интерфейса.

Кастомные breakpoints обеспечивают полный контроль над адаптивностью, позволяют расширять возможности стандартной темы MUI и создавать интерфейсы, оптимизированные под уникальные устройства и макеты.

Оглавление