Адаптивные отступы

В библиотеке MUI для управления отступами и позиционированием компонентов используется система spacing, которая интегрирована с темой приложения. Это позволяет создавать интерфейсы с адаптивной версткой, где отступы автоматически подстраиваются под размер экрана или используемую тему.

Система spacing

MUI предоставляет функцию theme.spacing(), которая возвращает значение отступа в пикселях. По умолчанию spacing(1) соответствует 8 пикселям.

const useStyles = makeStyles((theme) => ({
  container: {
    padding: theme.spacing(2), // 16px
    marginBottom: theme.spacing(3), // 24px
  },
}));

Ключевые моменты:

Любое значение, передаваемое в spacing(), умножается на базовую единицу (по умолчанию 8px).
Можно использовать дробные значения для более тонкой настройки: theme.spacing(0.5) = 4px.

Адаптивные отступы с `sx` пропом

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

<Box
  sx={{
    p: { xs: 1, sm: 2, md: 3 }, // padding: 8px на xs, 16px на sm, 24px на md
    mb: { xs: 2, sm: 3 }        // margin-bottom: 16px на xs, 24px на sm
  }}
>
  Контент
</Box>

Разбор:

xs, sm, md, lg, xl — стандартные точки останова в MUI.
Значения могут быть числами (умножаются на базовую единицу spacing) или строками с указанием конкретной длины ('10px', '1rem').
Использование объекта позволяет динамически адаптировать отступы под размеры экрана без написания медиазапросов вручную.

Комбинация с Grid и Stack

MUI предлагает компоненты Grid и Stack, которые облегчают управление отступами между элементами:

<Stack spacing={{ xs: 1, sm: 2, md: 3 }}>
  <Button>Кнопка 1</Button>
  <Button>Кнопка 2</Button>
  <Button>Кнопка 3</Button>
</Stack>

Проп spacing автоматически добавляет вертикальные или горизонтальные промежутки между дочерними элементами.
Использование объекта с точками останова делает интервалы между элементами адаптивными.

Для Grid используется система spacing в колонках:

<Grid container spacing={{ xs: 1, sm: 2, md: 4 }}>
  <Grid item xs={6}>Элемент 1</Grid>
  <Grid item xs={6}>Элемент 2</Grid>
</Grid>

Проп spacing задаёт внешние отступы между колонками, автоматически подстраиваясь под размеры экрана.
Значение spacing={2} означает отступ 16px (2 × 8px).

Пользовательская настройка spacing

В теме приложения можно изменить базовую единицу spacing:

const theme = createTheme({
  spacing: 10, // новая базовая единица
});

После этого theme.spacing(2) будет равен 20px вместо стандартных 16px.
Это позволяет подстраивать интерфейс под дизайн-систему проекта, сохраняя удобный синтаксис для всех компонентов.

Динамические вычисления отступов

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

<Box
  sx={{
    padding: (theme) => theme.spacing(window.innerWidth > 600 ? 4 : 2)
  }}
>
  Контент
</Box>

Такой подход позволяет менять отступы не только через breakpoints, но и через произвольные условия, например, ширину окна или контекст приложения.
При этом сохраняется единый стиль и согласованность отступов через theme.spacing.