Система breakpoints в MUI

Система breakpoints в MUI (Material-UI) обеспечивает адаптивное поведение компонентов в зависимости от размеров экрана. Она является ядром построения responsive-дизайна и позволяет управлять отображением элементов на различных устройствах без необходимости писать сложные медиазапросы вручную.

Определение и структура breakpoints

В MUI используются пять стандартных точек останова:

xs — экраны меньше 600px
sm — экраны от 600px до 900px
md — экраны от 900px до 1200px
lg — экраны от 1200px до 1536px
xl — экраны больше 1536px

Каждый breakpoint соответствует минимальной ширине, при которой применяются определенные стили. Например, sm применяет стили на экранах шириной от 600px и выше.

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

Компонент Box в MUI поддерживает props для задания адаптивных значений. Например:

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

<Box
  sx={{
    width: {
      xs: '100%',  // на маленьких экранах
      sm: '50%',   // на экранах sm и выше
      md: '33%',   // на экранах md и выше
    },
    bgcolor: {
      xs: 'primary.main',
      sm: 'secondary.main',
    },
  }}
/>

В этом примере width и bgcolor будут изменяться в зависимости от ширины экрана. Значения автоматически наследуются от меньших breakpoint’ов к большим, если не указано иное.

Функция `useTheme` и медиазапросы

Для более гибкой адаптивности можно использовать хук useTheme вместе с breakpoints.up, breakpoints.down, breakpoints.between и breakpoints.only:

import { useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';

const theme = useTheme();
const isSmallUp = useMediaQuery(theme.breakpoints.up('sm'));
const isMediumDown = useMediaQuery(theme.breakpoints.down('md'));
const isBetween = useMediaQuery(theme.breakpoints.between('sm', 'lg'));

up('sm') — применяет стили для sm и всех больших экранов
down('md') — применяет стили для md и всех меньших экранов
between('sm', 'lg') — стили применяются только между sm и lg

Breakpoints в Grid

Система Grid напрямую интегрирована с breakpoint’ами:

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

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

xs={12} — элемент занимает всю ширину на мобильных устройствах
sm={6} — половину ширины на экранах sm и выше
md={4} — треть ширины на экранах md и выше

Таким образом, можно управлять раскладкой сетки в зависимости от размера экрана без написания медиазапросов вручную.

Кастомизация breakpoints

MUI позволяет переопределять стандартные значения:

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

const theme = createTheme({
  breakpoints: {
    values: {
      xs: 0,
      sm: 480,
      md: 768,
      lg: 1024,
      xl: 1440,
    },
  },
});

<ThemeProvider theme={theme}>
  {/* компоненты */}
</ThemeProvider>

Изменяя значения breakpoints.values, можно адаптировать дизайн под любые нестандартные размеры экранов.

Комбинирование breakpoints и CSS

В MUI в объекте sx можно использовать медиазапросы для комплексного контроля:

<Box
  sx={{
    fontSize: '1rem',
    [theme.breakpoints.up('sm')]: {
      fontSize: '1.2rem',
    },
    [theme.breakpoints.up('md')]: {
      fontSize: '1.5rem',
    },
  }}
>
  Адаптивный текст
</Box>

Это позволяет писать привычные медиазапросы через JavaScript и интегрировать их с системой темы.