CSS-классы и переменные

Библиотека Ant Design использует комбинацию JavaScript-компонентов, системных CSS-классов и переменных темы. Стилизация построена таким образом, чтобы разработчик мог:

  • использовать готовые стили компонентов;
  • переопределять их через CSS-классы;
  • изменять глобальные параметры темы через переменные.

CSS-система Ant Design является частью общей дизайн-системы, где визуальные параметры стандартизированы: цвета, размеры, отступы, типографика и анимации. Это обеспечивает единообразие интерфейсов и упрощает масштабирование проекта.

CSS-классы в Ant Design

Принципы именования классов

Ant Design использует соглашение, похожее на BEM-подход, однако с собственными особенностями.

Основной формат:

.ant-[component]

Примеры:

.ant-btn
.ant-input
.ant-card
.ant-modal
.ant-table

Если компонент содержит внутренние элементы, применяется вложенная структура:

.ant-[component]-[element]

Примеры:

.ant-btn-icon
.ant-card-head
.ant-card-body
.ant-modal-header
.ant-modal-footer

Состояния или модификаторы добавляются в виде дополнительных классов:

.ant-[component]-[modifier]

Примеры:

.ant-btn-primary
.ant-btn-danger
.ant-btn-loading
.ant-input-disabled
.ant-modal-open

Подобная структура облегчает:

  • чтение кода
  • переопределение стилей
  • поиск элементов в DOM

Базовые CSS-классы компонентов

Кнопки

Кнопка — один из наиболее часто используемых компонентов.

Основной класс:

.ant-btn

Модификаторы:

.ant-btn-primary
.ant-btn-default
.ant-btn-dashed
.ant-btn-text
.ant-btn-link
.ant-btn-dangerous

Пример HTML:

<button class="ant-btn ant-btn-primary">
  Сохранить
</button>

Классы состояний:

.ant-btn-loading
.ant-btn-disabled
.ant-btn-background-ghost
.ant-btn-block

Поля ввода

Базовый класс:

.ant-input

Дополнительные элементы:

.ant-input-affix-wrapper
.ant-input-group
.ant-input-group-addon
.ant-input-prefix
.ant-input-suffix

Пример структуры:

<div class="ant-input-affix-wrapper">
  <input class="ant-input" />
</div>

Состояния:

.ant-input-disabled
.ant-input-status-error
.ant-input-status-warning

Карточки

Карточки используются для контейнеров интерфейса.

Основные классы:

.ant-card
.ant-card-head
.ant-card-body
.ant-card-actions

Структура:

<div class="ant-card">
  <div class="ant-card-head">
    Заголовок
  </div>

  <div class="ant-card-body">
    Контент
  </div>
</div>

Таблицы

Таблицы имеют сложную структуру и большое количество классов.

Основные элементы:

.ant-table
.ant-table-container
.ant-table-content
.ant-table-thead
.ant-table-tbody
.ant-table-row
.ant-table-cell

Пример:

<table class="ant-table">
  <thead class="ant-table-thead">
  </thead>

  <tbody class="ant-table-tbody">
  </tbody>
</table>

Дополнительные состояния:

.ant-table-row-selected
.ant-table-row-hover
.ant-table-cell-fix-left
.ant-table-cell-fix-right

Внутренние служебные классы

Ant Design также использует утилитарные классы.

Скрытие элементов

.ant-hidden

или

.ant-hidden-xs
.ant-hidden-sm
.ant-hidden-md

Используются для адаптивного поведения.

Анимации

.ant-motion-collapse
.ant-motion-fade
.ant-motion-slide

Эти классы управляют переходами и анимациями компонентов.

Переопределение CSS-классов

Одним из распространённых способов кастомизации является переопределение стандартных классов.

Пример изменения цвета кнопки:

.ant-btn-primary {
  background: #5a54ff;
  border-color: #5a54ff;
}

Изменение радиуса:

.ant-btn {
  border-radius: 10px;
}

Изменение отступов:

.ant-card-body {
  padding: 32px;
}

Важно учитывать специфичность CSS. Иногда требуется повышение приоритета:

.ant-btn.ant-btn-primary {
  background: #4b40ff;
}

CSS-переменные в Ant Design

Начиная с современных версий библиотеки, Ant Design активно использует CSS-переменные (Custom Properties).

Они позволяют изменять тему интерфейса без полной переработки стилей.

Основной формат:

--ant-[token]

Цветовые переменные

Цветовая система — основа визуального оформления интерфейса.

Основные переменные:

--ant-primary-color
--ant-success-color
--ant-warning-color
--ant-error-color
--ant-info-color

Пример использования:

:root {
  --ant-primary-color: #4f46e5;
}

После изменения переменной все компоненты, использующие основной цвет, автоматически обновятся.

Переменные типографики

Ant Design стандартизирует размеры шрифтов.

Основные переменные:

--ant-font-size
--ant-font-size-sm
--ant-font-size-lg
--ant-line-height

Пример:

:root {
  --ant-font-size: 15px;
}

Это влияет на:

  • кнопки
  • формы
  • таблицы
  • текстовые компоненты

Переменные отступов

Отступы контролируют вертикальный и горизонтальный ритм интерфейса.

Основные токены:

--ant-padding
--ant-padding-sm
--ant-padding-lg
--ant-margin
--ant-margin-sm
--ant-margin-lg

Пример:

:root {
  --ant-padding: 16px;
}

Переменные границ и радиусов

Система радиусов определяет форму элементов интерфейса.

Основные переменные:

--ant-border-radius
--ant-border-radius-sm
--ant-border-radius-lg

Пример:

:root {
  --ant-border-radius: 8px;
}

Это влияет на:

  • кнопки
  • карточки
  • модальные окна
  • поля ввода

Переменные теней

Тени используются для создания иерархии интерфейса.

Основные токены:

--ant-box-shadow-base
--ant-box-shadow-secondary

Пример:

:root {
  --ant-box-shadow-base: 0 4px 16px rgba(0,0,0,0.08);
}

Переменные размеров компонентов

Некоторые компоненты используют собственные переменные.

Пример для кнопок:

--ant-btn-height
--ant-btn-padding-horizontal

Для форм:

--ant-input-height
--ant-input-padding-horizontal

Для таблиц:

--ant-table-padding-vertical
--ant-table-padding-horizontal

Использование CSS-переменных внутри компонентов

CSS-переменные можно применять напрямую.

Пример:

.custom-button {
  background: var(--ant-primary-color);
  border-radius: var(--ant-border-radius);
}

Это обеспечивает совместимость с темой Ant Design.

Динамическое изменение темы

CSS-переменные позволяют изменять тему во время работы приложения.

Пример:

document.documentElement.style.setProperty(
  "--ant-primary-color",
  "#7c3aed"
);

После выполнения кода все компоненты автоматически изменят основной цвет.

Это используется для:

  • переключения тем
  • настройки брендинга
  • пользовательских настроек интерфейса

Использование переменных в тёмной теме

Ant Design поддерживает тёмную тему через набор переменных.

Пример:

[data-theme="dark"] {
  --ant-primary-color: #8b5cf6;
  --ant-background-color: #141414;
  --ant-text-color: #ffffff;
}

Переключение темы:

document.body.setAttribute("data-theme", "dark");

Локальные CSS-переменные компонентов

Иногда переменные объявляются внутри конкретного компонента.

Пример:

.ant-card {
  --card-padding: 24px;
}

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

.ant-card-body {
  padding: var(--card-padding);
}

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

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

Чаще всего кастомизация выполняется в глобальном файле стилей.

Пример:

:root {

  --ant-primary-color: #6366f1;
  --ant-border-radius: 10px;
  --ant-font-size: 15px;

}

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

Комбинирование CSS-классов и переменных

Наиболее гибкий подход — совмещать оба механизма.

Пример:

.ant-btn-primary {
  background: var(--ant-primary-color);
  border-radius: var(--ant-border-radius);
}

Такой подход позволяет:

  • сохранять совместимость с системой темы
  • легко масштабировать стили
  • быстро менять дизайн приложения

Рекомендации по работе со стилями Ant Design

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

Лучше использовать существующие классы библиотеки:

.ant-btn
.ant-card
.ant-input

Это обеспечивает предсказуемость интерфейса.

Минимизация переопределений

Глубокие переопределения могут привести к конфликтам при обновлении библиотеки.

Предпочтительнее:

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

Создание собственных компонентов-обёрток

Часто используется подход:

.app-button {
  border-radius: var(--ant-border-radius);
}
<Button className="app-button">

Это снижает зависимость от внутренней структуры Ant Design.

Структура CSS-настройки в крупных проектах

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

1. Глобальные переменные

theme.css

2. Переопределения Ant Design

antd-overrides.css

3. Стили компонентов приложения

components.css

Такая архитектура облегчает поддержку проекта и обновление библиотеки.

Оглавление