Stitches интеграция

Radix UI предоставляет низкоуровневые, доступные и полностью настраиваемые компоненты интерфейса. Для полноценной стилизации этих компонентов удобно использовать Stitches — библиотеку CSS-in-JS с поддержкой вариаций, тем и строгой типизацией.

Настройка Stitches

Импорт и базовая конфигурация выполняются следующим образом:

import { createStitches } from '@stitches/react';

export const { styled, css, theme, createTheme, globalCss } = createStitches({
  tokens: {
    colors: {
      primary: '#1E40AF',
      secondary: '#9333EA',
      background: '#F3F4F6',
      text: '#111827',
    },
    space: {
      1: '4px',
      2: '8px',
      3: '16px',
      4: '32px',
    },
    fontSizes: {
      sm: '12px',
      md: '16px',
      lg: '20px',
      xl: '24px',
    },
  },
  utils: {
    mx: (value) => ({ marginLeft: value, marginRight: value }),
    my: (value) => ({ marginTop: value, marginBottom: value }),
    px: (value) => ({ paddingLeft: value, paddingRight: value }),
    py: (value) => ({ paddingTop: value, paddingBottom: value }),
  },
});

В этой конфигурации задаются токены для цветов, отступов и размеров шрифтов. utils упрощают применение часто используемых CSS-свойств.

Стилизация компонентов Radix UI

Radix UI предлагает множество компонентов, таких как Dialog, Popover, Tooltip, Slider. Их можно оборачивать с помощью styled из Stitches для придания уникального дизайна.

Пример: стилизация диалогового окна

import * as Dialog from '@radix-ui/react-dialog';
import { styled } from './stitches.config';

const StyledOverlay = styled(Dialog.Overlay, {
  backgroundColor: 'rgba(0,0,0,0.5)',
  position: 'fixed',
  inset: 0,
});

const StyledContent = styled(Dialog.Content, {
  backgroundColor: '$background',
  borderRadius: '8px',
  padding: '$4',
  width: '90%',
  maxWidth: '500px',
  boxShadow: '0 10px 25px rgba(0,0,0,0.1)',
});

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

Использование вариаций и состояний

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

const Button = styled('button', {
  borderRadius: '4px',
  padding: '$2 $3',
  fontSize: '$md',
  cursor: 'pointer',
  variants: {
    color: {
      primary: { backgroundColor: '$primary', color: 'white' },
      secondary: { backgroundColor: '$secondary', color: 'white' },
    },
    size: {
      small: { fontSize: '$sm', padding: '$1 $2' },
      large: { fontSize: '$lg', padding: '$3 $4' },
    },
  },
  defaultVariants: {
    color: 'primary',
    size: 'large',
  },
});

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

Анимации и ключевые состояния

Radix UI предоставляет состояния компонентов, такие как open, checked, disabled. С помощью Stitches их можно стилизовать через селекторы атрибутов:

const StyledCheckbox = styled('div', {
  width: '24px',
  height: '24px',
  border: '2px solid $text',
  borderRadius: '4px',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',

  '&[data-state="checked"]': {
    backgroundColor: '$primary',
    borderColor: '$primary',
  },

  '&[data-disabled]': {
    opacity: 0.5,
    cursor: 'not-allowed',
  },
});

Таким образом, доступные состояния компонентов Radix UI интегрируются в систему Stitches, позволяя создавать динамические и отзывчивые интерфейсы.

Комбинирование нескольких компонентов

Radix UI позволяет создавать сложные композиции, например DropdownMenu с кастомными кнопками и пунктами:

import * as DropdownMenu from '@radix-ui/react-dropdown-menu';

const StyledMenuContent = styled(DropdownMenu.Content, {
  backgroundColor: '$background',
  borderRadius: '6px',
  padding: '$2',
  minWidth: '180px',
  boxShadow: '0 5px 15px rgba(0,0,0,0.1)',
});

const StyledMenuItem = styled(DropdownMenu.Item, {
  padding: '$2 $3',
  borderRadius: '4px',
  cursor: 'pointer',
  '&:hover': { backgroundColor: '$primary', color: 'white' },
});

Stitches упрощает создание единого визуального языка для всех элементов интерфейса, включая сложные вложенные компоненты Radix UI.

Темизация и адаптивные стили

Stitches позволяет создавать темы и адаптивные стили, что удобно для интеграции с Radix UI:

const darkTheme = createTheme({
  colors: {
    background: '#111827',
    text: '#F3F4F6',
    primary: '#2563EB',
  },
});

Тема может быть динамически применена ко всем компонентам Radix UI без переписывания стилей, поддерживая светлую и тёмную версии интерфейса.

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

  • Использовать styled для оборачивания только верхнеуровневых Radix компонентов, чтобы сохранить доступность.
  • Разделять стили компонентов и вариации через токены и variants для единообразия.
  • Для анимаций применять CSS-переменные и селекторы состояния (data-state) вместо JavaScript-анимаций для лучшей производительности.
  • Структурировать стили с использованием globalCss и тем для централизованного контроля дизайна.

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

Оглавление