Как в Ant Design кастомизировать цвета: полное руководство

Ant Design (antd) — это мощная библиотека компонентов для React, предоставляющая множество готовых решений для создания интерфейсов. Визуальный стиль antd включает в себя базовую палитру, которую можно настроить под требования проекта. Эта статья расскажет, как кастомизировать цвета в antd, включая изменение основной темы, настройку цветовых переменных и использование CSS-in-JS подхода для создания уникального дизайна приложения.

Основные способы кастомизации цветов в Ant Design

Ant Design предлагает несколько способов настройки цветовой палитры. Вот основные методы:

• Изменение темы с помощью less: Ant Design построен на less, и изменение цветовых переменных через less позволяет гибко настраивать тему.
• Использование библиотеки antd с craco: craco упрощает настройку проекта create-react-app для поддержки кастомизации less.
• Прямая настройка стилей через CSS-in-JS: Использование styled-components или встроенных стилей для применения индивидуальных цветов к компонентам.

Настройка темы с использованием less

Ant Design предоставляет множество переменных для настройки цветов через less. Для использования этого подхода нужно настроить поддержку less в проекте React. Если проект создан с использованием create-react-app, рекомендуется использовать craco.

Настройка проекта с помощью craco

Для начала установим необходимые зависимости:

npm install @craco/craco craco-less less less-loader

Затем создадим файл craco.config.js в корневой директории проекта:

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

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

В этом примере мы изменяем переменную @primary-color на #1DA57A, что обновляет основной цвет темы Ant Design на зелёный. Теперь в package.json нужно заменить команду react-scripts start на craco start:

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}

После этого при запуске приложения будут применены изменения в теме, и новый цвет станет основным для всех компонентов Ant Design.

Настройка цветов с использованием CSS-in-JS

Если вам нужно изменить цвет только для отдельных компонентов, без изменения всей темы, можно использовать CSS-in-JS, такие как styled-components или встроенные стили. Это позволит вам применять кастомные стили без необходимости изменять конфигурацию темы.

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

import React from 'react';
import styled from 'styled-components';
import { Button } from 'antd';

const CustomButton = styled(Button)`
  background-color: #1DA57A;
  border-color: #1DA57A;

  &:hover {
    background-color: #1890ff;
    border-color: #1890ff;
  }
`;

function App() {
  return <CustomButton>Кастомная кнопка</CustomButton>;
}

export default App;

Здесь мы изменили цвет фона и границы кнопки, используя styled-components, что даёт больше гибкости для стилизации отдельных компонентов.

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

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

• @primary-color: Основной цвет темы, влияет на кнопки, ссылки и многие другие элементы.
• @link-color: Цвет ссылок.
• @success-color: Цвет для успешных сообщений.
• @warning-color: Цвет для предупреждений.
• @error-color: Цвет для ошибок.

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

Заключение

Кастомизация цветов в Ant Design позволяет создать уникальный дизайн приложения, который будет соответствовать требованиям проекта. Используя less и craco, можно гибко изменять тему, а CSS-in-JS даёт возможность настроить отдельные компоненты.