Отступы в sx пропсе

В библиотеке MUI (Material-UI) для управления стилями компонентов используется проп sx. Одним из наиболее часто используемых аспектов является настройка отступов — как внешних (margin), так и внутренних (padding). sx позволяет задавать отступы компактно и декларативно, используя систему масштабируемых значений.

Основные свойства отступов

В sx применяются два базовых свойства:

  • m (margin) — внешний отступ компонента
  • p (padding) — внутренний отступ компонента

Каждое из этих свойств может принимать:

  1. Единое значение — применяется ко всем сторонам:
<Box sx={{ m: 2, p: 3 }}>Контент</Box>

Здесь m: 2 означает, что ко всем четырём сторонам компонента добавлен внешний отступ размером 2 по шкале MUI (обычно 8px × 2 = 16px), а p: 3 добавляет внутренний отступ 24px.

  1. Сокращённые направления:
  • mt — margin-top
  • mr — margin-right
  • mb — margin-bottom
  • ml — margin-left
  • mx — margin-left и margin-right
  • my — margin-top и margin-bottom

Аналогично для padding:

  • pt, pr, pb, pl
  • px (padding-left и padding-right), py (padding-top и padding-bottom)

Пример:

<Box sx={{ mt: 4, mb: 2, px: 3 }}>Контент</Box>

В данном случае верхний отступ будет 32px, нижний — 16px, горизонтальные внутренние отступы — 24px.

Использование массивов для адаптивности

MUI поддерживает responsive-стили через массивы в sx. Массив указывает значения отступов для разных точек останова (breakpoints).

<Box sx={{ p: [1, 2, 3] }}>Контент</Box>

Здесь:

  • p: 1 — для мобильных устройств (xs)
  • p: 2 — для планшетов (sm)
  • p: 3 — для больших экранов (md и выше)

Можно комбинировать массивы с отдельными направлениями:

<Box sx={{ px: [1, 3], py: [2, 4] }}>Контент</Box>

Такой подход обеспечивает динамическую адаптацию отступов без медиазапросов CSS вручную.

Отступы через функцию темы

MUI использует тему с масштабом spacing. Значения m и p автоматически интерпретируются через функцию theme.spacing(value). Например:

<Box sx={{ m: 2 }}>Контент</Box>

Эквивалентно:

<Box sx={{ m: theme => theme.spacing(2) }}>Контент</Box>

Это важно для поддержания единообразия отступов по всему приложению и упрощает поддержку, если базовая шкала spacing изменится.

Отрицательные отступы

Для margin поддерживаются отрицательные значения, что позволяет компонентам “выходить” за пределы родителя:

<Box sx={{ mt: -2 }}>Верхний отступ отрицательный</Box>

Отрицательные значения работают только с margin, padding не может быть отрицательным.

Комбинирование с другими стилями

Sx позволяет комбинировать отступы с любыми CSS-свойствами в одном объекте:

<Box
  sx={{
    m: 2,
    p: 3,
    bgcolor: 'primary.main',
    borderRadius: 2,
    boxShadow: 3
  }}
>
  Контент
</Box>

Все значения интерпретируются через тему и систему spacing, что упрощает создание согласованного дизайна.

Краткая таблица сокращений

Свойство Описание
m margin всех сторон
mt, mr, mb, ml margin top/right/bottom/left
mx, my margin по горизонтали/вертикали
p padding всех сторон
pt, pr, pb, pl padding top/right/bottom/left
px, py padding по горизонтали/вертикали

Практическая рекомендация

Для больших проектов рекомендуется:

  1. Использовать только sx вместо inline-стилей или классов для единообразия.
  2. Определять отступы через тему (theme.spacing) для согласованного масштаба.
  3. Применять сокращения mx, my, px, py для сокращения кода и повышения читаемости.
  4. Для адаптивного дизайна использовать массивы значений, что уменьшает необходимость медиазапросов CSS вручную.

Эта система делает работу с отступами в MUI гибкой, понятной и легко поддерживаемой в масштабируемых интерфейсах.

Оглавление