Подключение стилей и тем

Библиотека Ant Design (AntD) предоставляет гибкую систему стилизации компонентов через использование встроенных стилей, тем и переменных LESS. Для полноценного использования всех возможностей дизайна важно правильно подключить стили и настроить тему приложения.

Подключение стандартных стилей

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

import 'antd/dist/antd.css';

Это подключение позволяет использовать все компоненты AntD с дефолтной темой. Однако при таком подходе невозможно изменить цветовую схему или настроить переменные без переопределения CSS.

Для проектов с Create React App такой подход работает сразу. Для проектов с Webpack или Vite можно использовать аналогичное подключение CSS, но рекомендуется переходить к подключению через LESS, если планируется кастомизация темы.

Подключение через LESS

Использование LESS дает полный контроль над темой Ant Design. Для этого требуется установить поддержку LESS в проекте:

npm install less less-loader --save-dev

В Webpack конфигурации необходимо настроить less-loader с опцией modifyVars:

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'less-loader',
            options: {
              lessOptions: {
                javascriptEnabled: true,
                modifyVars: {
                  '@primary-color': '#1DA57A',
                  '@link-color': '#1890ff',
                  '@border-radius-base': '4px',
                },
              },
            },
          },
        ],
      },
    ],
  },
};

Ключевые моменты при работе с LESS:

  • javascriptEnabled: true обязательно для корректной работы встроенных функций AntD.
  • modifyVars позволяет переопределять все основные переменные темы: цвета, отступы, шрифты и размеры компонентов.
  • Переопределение переменных применимо ко всем компонентам без необходимости модифицировать их отдельные CSS.

Настройка темы через ConfigProvider

Ant Design предоставляет компонент ConfigProvider, который позволяет динамически управлять темой приложения без перекомпиляции LESS.

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

import { ConfigProvider, Button } from 'antd';

const App = () => (
  <ConfigProvider
    theme={{
      token: {
        colorPrimary: '#ff4d4f',
        borderRadius: 8,
        fontSize: 16,
      },
    }}
  >
    <Button type="primary">Кнопка с кастомной темой</Button>
  </ConfigProvider>
);

Особенности динамической темы:

  • Изменения вступают в силу сразу при рендере.
  • Поддерживаются CSS-переменные, что позволяет переключать темы на лету.
  • Не требует конфигурации Webpack или Vite.

Темизация отдельных компонентов

Если необходимо изменить стиль только для определенных компонентов, можно использовать стилизацию через CSS-in-JS, предоставляемую библиотекой Ant Design, или стандартные классы CSS:

import { Button } from 'antd';
import './custom.css';
.custom-button {
  background-color: #ff7a45;
  border-radius: 12px;
  color: #fff;
}

.ant-btn.custom-button:hover {
  background-color: #ff4d4f;
}
<Button className="custom-button">Кастомная кнопка</Button>

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

Сообщество Ant Design разработало несколько готовых тем, которые можно интегрировать:

  • Ant Design Dark Theme — тёмная тема для приложения.
  • Ant Design Pro Theme — расширенная тема для корпоративных приложений.

Подключение осуществляется аналогично подключению CSS или через LESS с переопределением переменных.

import 'antd/dist/antd.dark.css';

Или через modifyVars:

modifyVars: {
  '@primary-color': '#1890ff',
  '@layout-body-background': '#001529',
}

Переменные темы и их группы

Ant Design разделяет переменные на группы для удобства настройки:

  1. Цвета

    • @primary-color — основной цвет.
    • @link-color — цвет ссылок.
    • @success-color, @error-color, @warning-color.

  2. Типографика

    • @font-size-base — базовый размер шрифта.
    • @heading-color — цвет заголовков.
    • @text-color — основной цвет текста.

  3. Компоненты

    • @border-radius-base — скругление кнопок и карточек.
    • @border-color-base — цвет границ.
    • @padding-lg, @padding-md, @padding-sm — внутренние отступы.

  4. Тонкости интерфейса

    • @box-shadow-base — базовая тень.
    • @control-height-lg — высота элементов управления.

Автоматизация темизации с Craco и Vite

Для проектов на Create React App используется craco:

npm install @craco/craco craco-less

Конфигурация craco.config.js:

const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1DA57A' },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

Для Vite применяется плагин vite-plugin-theme для динамического изменения темы без перезапуска сервера.

Вывод

Подключение стилей и настройка тем в Ant Design обеспечивают полное управление визуальным оформлением приложения. Использование CSS, LESS, ConfigProvider и переменных темы позволяет создавать как простые изменения цвета, так и сложные кастомные интерфейсы с динамическим переключением тем. Грамотная настройка стилей повышает единообразие дизайна и упрощает поддержку UI в масштабных проектах.

Оглавление