CSS Variables

Radix UI предоставляет набор компонентов с высокой степенью настраиваемости, где CSS-переменные (CSS Variables) играют ключевую роль в управлении стилями. Каждый компонент Radix UI использует переменные для цветов, размеров, отступов и состояний интерактивных элементов, что позволяет централизованно управлять визуальной частью интерфейса.

Определение и синтаксис CSS-переменных

CSS-переменные объявляются с префиксом -- внутри селектора :root или любого другого элемента:

:root {
  --button-bg: #1a73e8;
  --button-color: #ffffff;
  --button-padding: 12px 24px;
}

Переменные можно использовать через функцию var():

button {
  background-color: var(--button-bg);
  color: var(--button-color);
  padding: var(--button-padding);
}

В Radix UI переменные часто встроены в компонент через data-state и другие атрибуты состояния, что позволяет динамически изменять внешний вид без прямого вмешательства в CSS.

Использование переменных в компонентах Radix UI

Radix UI предоставляет Primitive-компоненты, у которых каждый визуальный аспект связан с CSS-переменной. Например, для компонента Slider:

:root {
  --slider-track-height: 4px;
  --slider-thumb-size: 16px;
  --slider-thumb-color: #ff5722;
}

Компонент автоматически использует эти переменные:

<Slider defaultValue={50} max={100} />

Изменяя переменные, можно глобально менять стиль всех слайдеров на странице:

:root {
  --slider-thumb-color: #4caf50; /* изменится цвет всех ползунков */
}

Настройка состояний через CSS-переменные

Radix UI активно использует состояния компонентов, которые можно контролировать через переменные. Например, кнопки с состоянием pressed:

:root {
  --button-bg: #1a73e8;
  --button-bg-pressed: #1558b0;
}

button[data-state="pressed"] {
  background-color: var(--button-bg-pressed);
}

Атрибуты data-state, data-disabled и другие позволяют отдельно задавать стили для активных, наведения и заблокированных состояний, сохраняя структуру CSS чистой и читаемой.

Тема и динамическая смена стилей

CSS-переменные в Radix UI поддерживают динамическую смену тем. Создаются переменные для светлой и темной темы:

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}

[data-theme="dark"] {
  --bg-color: #121212;
  --text-color: #ffffff;
}

Компоненты автоматически подтягивают переменные:

<Box css={{ backgroundColor: 'var(--bg-color)', color: 'var(--text-color)' }}>
  Пример текста
</Box>

При смене атрибута data-theme все компоненты адаптируются без дополнительного JS-кода.

Композиция и переопределение переменных

CSS-переменные могут быть локальными для компонента или глобальными. Локальные переменные определяются на уровне родительского элемента, что позволяет создавать изолированные стили:

.card {
  --card-bg: #f0f0f0;
  --card-padding: 20px;
}

.card button {
  background-color: var(--card-bg);
  padding: var(--card-padding);
}

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

Анимации и переходы с переменными

Radix UI совместим с CSS-переменными для анимаций. Например, для плавного изменения цвета при наведении:

:root {
  --button-bg: #1a73e8;
  --button-bg-hover: #1558b0;
}

button {
  background-color: var(--button-bg);
  transition: background-color 0.2s ease;
}

button:hover {
  background-color: var(--button-bg-hover);
}

Использование переменных позволяет объединять тему, состояния и анимацию без дублирования кода.

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

  • Именование переменных: использовать префикс, связанный с компонентом (--button-, --slider-), для удобства и предотвращения конфликтов.
  • Глобальные и локальные переменные: глобальные — для темы и базовых стилей, локальные — для переопределения отдельных компонентов.
  • Состояния и темы: использовать data-state и data-theme для динамического изменения переменных.
  • Композитные значения: переменные могут хранить не только цвета, но и размеры, тени, градиенты и т.д., что упрощает масштабирование UI.

Интеграция с CSS-in-JS

В Radix UI можно использовать CSS-in-JS решения, например stitches или vanilla-extract, которые поддерживают переменные:

const Button = styled('button', {
  backgroundColor: 'var(--button-bg)',
  color: 'var(--button-color)',
  padding: 'var(--button-padding)',
  '&:hover': {
    backgroundColor: 'var(--button-bg-hover)',
  },
});

Такой подход позволяет объединять динамику переменных и программное создание стилей, сохраняя типизацию и предсказуемость.

Взаимодействие переменных с Radix Primitives

Каждый Radix Primitive предоставляет набор встроенных переменных, например:

  • --radix-popover-content-transform-origin
  • --radix-tooltip-arrow-size
  • --radix-switch-thumb-background

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

Radix UI и CSS Variables вместе создают мощный инструмент для масштабируемых, настраиваемых интерфейсов, где визуальные параметры компонентов централизованно управляются, поддерживаются динамические состояния и темы, а структура кода остаётся чистой и предсказуемой.

Оглавление