Функция spacing и её применение

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

Основы функции spacing

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

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

const theme = createTheme({
  spacing: 8, // базовая единица (по умолчанию 8px)
});

theme.spacing(2); // вернёт 16

Функция spacing принимает следующие варианты аргументов:

  1. Одиночное число — возвращает единичный отступ.

    theme.spacing(3); // 24px

  2. Несколько чисел — возвращает строку, которая может использоваться для CSS-свойств, поддерживающих несколько значений, например, margin или padding.

    theme.spacing(1, 2, 3, 4); // "8px 16px 24px 32px"

  3. Массив чисел — аналогично перечисленным аргументам, возвращает строку с соответствующими отступами.

    theme.spacing([1, 2, 3, 4]); // "8px 16px 24px 32px"

Применение в компонентах

Отступы с помощью sx пропса

MUI активно использует sx для стилизации компонентов. spacing позволяет удобно управлять внутренними и внешними отступами:

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

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

Здесь:

  • m (margin) и p (padding) могут быть заданы как числа, которые умножаются на базовую единицу spacing.
  • sx={{ mt: 2, mb: 1 }} задаёт разные верхний и нижний отступы.
Использование в Grid

Функция spacing особенно полезна при работе с сеткой Grid:

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

<Grid container spacing={2}>
  <Grid item xs={6}>
    Первый элемент
  </Grid>
  <Grid item xs={6}>
    Второй элемент
  </Grid>
</Grid>
  • spacing={2} — создает промежуток между элементами сетки равный 16px (2 × 8px).
  • Значение spacing можно комбинировать с sx для более тонкой настройки.

Кастомизация базовой единицы

Базовую единицу можно изменить при создании темы, чтобы подстроить отступы под дизайн-систему проекта:

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

theme.spacing(3); // 30px

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

Динамическое использование spacing

Функция spacing может применяться не только в sx или Grid, но и в обычных стилях, созданных через styled:

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

const StyledButton = styled(Button)(({ theme }) => ({
  margin: theme.spacing(2, 4), // "16px 32px"
  padding: theme.spacing(1, 3), // "8px 24px"
}));

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

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

  • Использовать числа вместо пикселей — это повышает консистентность интерфейса и облегчает масштабирование.
  • Комбинировать spacing с Grid и sx — это упрощает поддержку сложных макетов.
  • Менять базовую единицу при необходимости — позволяет адаптировать дизайн под разные платформы, сохраняя пропорции.

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

Оглавление