Работа с CSS Variables

Ant Design (AntD) предоставляет богатый набор компонентов, которые можно кастомизировать с помощью CSS-переменных (CSS Variables). Использование переменных позволяет централизованно управлять темами, стилями и визуальной консистентностью приложений на React.

Подключение CSS Variables

Ant Design изначально использует Less-переменные для настройки темы, но начиная с версии 5, библиотека поддерживает CSS Variables для динамического изменения стилей без перекомпиляции. Основной способ подключения:

import 'antd/dist/reset.css';

После этого стандартные CSS-переменные AntD становятся доступными для использования в стилях:

:root {
  --antd-primary-color: #1890ff;
  --antd-success-color: #52c41a;
  --antd-error-color: #ff4d4f;
}

Основные CSS-переменные Ant Design

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

  • --antd-primary-color — основной цвет приложения.
  • --antd-link-color — цвет ссылок.
  • --antd-success-color — цвет состояния успеха.
  • --antd-warning-color — цвет состояния предупреждения.
  • --antd-error-color — цвет состояния ошибки.
  • --antd-font-size-base — базовый размер шрифта.
  • --antd-border-radius-base — базовый радиус скругления элементов.

Эти переменные можно переопределять в корневом селекторе :root или на уровне отдельного контейнера:

.theme-dark {
  --antd-primary-color: #722ed1;
  --antd-font-size-base: 16px;
}

Динамическая смена темы

Одним из главных преимуществ CSS-переменных является возможность менять тему на лету, без перезагрузки приложения. Например, реализация переключателя светлой и темной темы:

const toggleTheme = () => {
  const root = document.documentElement;
  if (root.dataset.theme === 'dark') {
    root.dataset.theme = 'light';
    root.style.setProperty('--antd-primary-color', '#1890ff');
  } else {
    root.dataset.theme = 'dark';
    root.style.setProperty('--antd-primary-color', '#722ed1');
  }
};

В CSS можно использовать такой подход:

:root[data-theme='dark'] {
  --antd-primary-color: #722ed1;
  --antd-background-color: #1f1f1f;
  --antd-text-color: #fff;
}

Переопределение переменных на уровне компонентов

Для локального изменения стилей отдельных компонентов можно использовать inline styles с CSS Variables:

<Button
  style={{
    '--antd-primary-color': '#ff4d4f',
    '--antd-font-size-base': '18px',
  }}
>
  Danger Button
</Button>

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

Использование CSS Variables в кастомных стилях

Любые кастомные стили могут ссылаться на переменные AntD. Например:

.custom-card {
  background-color: var(--antd-background-color, #fff);
  border-radius: var(--antd-border-radius-base, 4px);
  color: var(--antd-text-color, #000);
}

Использование var(--variable, fallback) обеспечивает корректное отображение даже при отсутствии переопределения.

Интеграция с styled-components и emotion

CSS-переменные хорошо сочетаются с CSS-in-JS библиотеками:

import styled from 'styled-components';

const CustomButton = styled(Button)`
  background-color: var(--antd-primary-color);
  font-size: var(--antd-font-size-base);
  border-radius: var(--antd-border-radius-base);
`;

Это позволяет сохранять мощь CSS Variables и одновременно использовать все возможности JS-стилей.

Советы по организации тем

  1. Создавать отдельные файлы тем: theme-light.css, theme-dark.css.
  2. Использовать единый корневой селектор для всего приложения (:root или body).
  3. Минимизировать inline-переопределения — они могут усложнить поддержку стилей.
  4. Комбинировать с Less-переменными для статических настроек при сборке.

Работа с пользовательскими переменными

Можно создавать собственные переменные и использовать их совместно с AntD:

:root {
  --custom-card-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.custom-card {
  box-shadow: var(--custom-card-shadow);
}

Это обеспечивает единообразие и упрощает последующую поддержку приложения.

Использование CSS Variables в Ant Design открывает возможности для динамических тем, локальных кастомизаций компонентов и универсальных стилей, позволяя создавать современный, гибко настраиваемый UI.

Оглавление