Базовая единица spacing

В MUI (Material-UI) spacing является фундаментальной частью системы дизайна, отвечающей за отступы, размеры элементов и согласованность интерфейса. В основе лежит единая числовая шкала, которая позволяет управлять отступами и размерами компонентов в единых пропорциях.

Принцип работы spacing

MUI использует константу spacing, определяемую в теме (theme). По умолчанию базовая единица равна 8 пикселям. Это означает, что вызов theme.spacing(1) вернёт 8px, theme.spacing(2) — 16px и так далее.

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

Таким образом, spacing создаёт модульную систему, где все отступы и размеры выстраиваются по кратным числам, обеспечивая визуальную гармонию.

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

MUI интегрирует spacing непосредственно в компоненты через системные пропсы, такие как sx, margin, padding.

Пример с sx:

<Box sx={{ m: 2, p: 3 }}>
  Контент с отступами
</Box>

Здесь m — сокращение для margin, p — для padding. Значения цифр автоматически умножаются на базовую единицу spacing (по умолчанию 8px).

Расширенные сокращения:

  • mt — margin-top
  • mb — margin-bottom
  • ml — margin-left
  • mr — margin-right
  • mx — margin-left + margin-right
  • my — margin-top + margin-bottom

Аналогично для padding: pt, pb, pl, pr, px, py.

<Box sx={{ mt: 4, px: 2 }}>
  Верхний отступ 32px, горизонтальные 16px
</Box>

Настройка базовой единицы spacing

Базовая единица может быть изменена при создании темы:

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

const theme = createTheme({
  spacing: 10, // теперь 1 единица = 10px
});

После этого вызов theme.spacing(2) вернёт 20px. Это особенно полезно при адаптации приложения к дизайн-системе с отличными от стандартных масштабами.

Комбинация spacing с сеткой и flex

Использование spacing эффективно в Grid и Flexbox.

Grid пример:

<Grid container spacing={3}>
  <Grid item xs={6}>
    Первый блок
  </Grid>
  <Grid item xs={6}>
    Второй блок
  </Grid>
</Grid>

Здесь spacing={3} означает интервал между элементами 24px (3 × 8). Grid автоматически применяет отрицательные маргины для контейнера и padding для элементов, чтобы сохранить консистентные зазоры.

Flexbox пример с sx:

<Box sx={{ display: 'flex', gap: 2 }}>
  <Button>Кнопка 1</Button>
  <Button>Кнопка 2</Button>
</Box>

Проп gap также использует базовую единицу spacing, обеспечивая равномерные промежутки между элементами без сложного расчёта margin.

Динамическое использование spacing в функциях

theme.spacing может принимать несколько аргументов для создания комплексных значений:

theme.spacing(1, 2, 3, 4); 
// вернёт '8px 16px 24px 32px'

Параметры следуют стандартной CSS-последовательности: top right bottom left. Это позволяет задавать индивидуальные отступы для каждой стороны блока через единый вызов функции.

Итоговое значение spacing

  • Базовая единица по умолчанию: 8px
  • Любое значение spacing умножается на базовую единицу
  • Поддерживаются как числовые, так и функциональные вызовы для комплексных отступов
  • Интегрируется в sx, Grid, Box и другие системные компоненты

Использование единой базовой единицы spacing обеспечивает согласованность интерфейса, облегчает масштабирование и поддержку кода, а также упрощает адаптивное проектирование и настройку темы под конкретные требования дизайна.

Оглавление