Адаптивные значения в sx

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

Синтаксис адаптивных значений

Адаптивные значения в sx реализуются через объект, ключами которого являются breakpoints, а значениями — соответствующие CSS-свойства. Базовая структура выглядит так:

<Box
  sx={{
    width: {
      xs: '100%',   // экран <600px
      sm: '50%',    // экран ≥600px
      md: '33%',    // экран ≥900px
      lg: '25%',    // экран ≥1200px
      xl: '20%'     // экран ≥1536px
    }
  }}
/>

Здесь xs, sm, md, lg и xl — стандартные точки останова MUI, задаваемые по умолчанию. Значения этих ключей автоматически применяются при переходе через соответствующую ширину экрана.

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

MUI создает медиазапросы для каждого указанного breakpoint. Например, для свойства width:

  • xs — базовое значение для всех экранов;
  • sm — применяется, когда ширина экрана ≥ 600px;
  • md — применяется, когда ширина экрана ≥ 900px;
  • и так далее.

Если для конкретного breakpoint значение не указано, применяется значение ближайшего меньшего breakpoint.

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

Адаптивные значения можно задавать через массив, где порядок элементов соответствует последовательности breakpoints:

<Box
  sx={{
    padding: [1, 2, 3, 4, 5] // xs, sm, md, lg, xl
  }}
/>
  • 1 — для xs;
  • 2 — для sm;
  • 3 — для md;
  • 4 — для lg;
  • 5 — для xl.

Массивы удобны для коротких адаптивных настроек, когда значения следуют по порядку breakpoints.

Комбинирование объектов и массивов

Можно смешивать объектный и массивный синтаксис, например:

<Box
  sx={{
    fontSize: {
      xs: '0.8rem',
      sm: '1rem',
      md: '1.2rem'
    },
    margin: [0.5, 1, 1.5]  // xs, sm, md
  }}
/>

Это позволяет гибко управлять различными стилевыми параметрами одновременно.

Динамические вычисления

Sx поддерживает функции, что позволяет вычислять значения на лету в зависимости от темы или пропсов:

<Box
  sx={(theme) => ({
    color: theme.palette.primary.main,
    fontSize: {
      xs: theme.typography.pxToRem(12),
      sm: theme.typography.pxToRem(14),
      md: theme.typography.pxToRem(16)
    }
  })}
/>

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

Специфические свойства для breakpoints

Можно применять медиазапросы не только к числовым свойствам (width, padding), но и к другим CSS-свойствам:

  • display
  • flexDirection
  • alignItems
  • justifyContent
  • fontSize
  • margin / padding
  • color и другие

Пример изменения структуры layout:

<Box
  sx={{
    display: 'flex',
    flexDirection: {
      xs: 'column',
      md: 'row'
    },
    gap: 2
  }}
/>

На маленьких экранах элементы будут располагаться вертикально, на больших — горизонтально.

Важные нюансы

  1. Порядок приоритетов: чем больше breakpoint, тем выше приоритет. md перекроет sm, если оба указаны.
  2. Отсутствие значения: если для определенного breakpoint значение не задано, используется ближайшее предыдущее.
  3. Комбинирование с классами: адаптивные значения sx работают независимо от классов CSS, но их можно комбинировать для более сложной стилизации.
  4. Тематические зависимости: при работе с функцией темы (theme) можно динамически подбирать значения, что повышает консистентность UI.

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

Адаптивные значения крайне полезны при разработке:

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

Использование sx с адаптивными значениями значительно сокращает код и делает стили более читаемыми, устраняя необходимость писать длинные CSS-медиа-запросы вручную.

Оглавление