Руководство по переопределению CSS стилей Ant Design

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

Кастомизация темы

Ant Design позволяет настраивать общий стиль путем конфигурации темы. Настройка темы в основном осуществляется через переменные Less.

Метод настройки

Установите less и less-loader в ваш проект:
```
npm install less less-loader --save-dev
```

Создайте vue.config.js в корне проекта (для проектов Vue CLI) или измените config-overrides.js (для проектов CRA) и добавьте следующий код:

const { defineConfig } = require('vue-cli-plugin-antd-config');
module.exports = defineConfig({
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: {
            'primary-color': '#1DA57A',
            'link-color': '#1DA57A',
            'border-radius-base': '2px',
          },
          javascriptEnabled: true,
        },
      },
    },
  },
});

Переменные Less

Ant Design предоставляет ряд переменных Less для кастомизации тем. Распространенные переменные включают:

Переменная	Описание	Значение по умолчанию
`@primary-color`	Основной цвет	`#1890ff`
`@link-color`	Цвет ссылок	`@primary-color`
`@success-color`	Цвет успеха	`#52c41a`
`@warning-color`	Цвет предупреждения	`#faad14`
`@error-color`	Цвет ошибки	`#f5222d`
`@font-size-base`	Базовый размер шрифта	`14px`
`@heading-color`	Цвет заголовка	`rgba(0, 0, 0, 0.85)`
`@text-color`	Цвет основного текста	`rgba(0, 0, 0, 0.65)`
`@text-color-secondary`	Цвет второстепенного текста	`rgba(0, 0, 0, 0.45)`
`@disabled-color`	Цвет в состоянии “отключено”	`rgba(0, 0, 0, 0.25)`
`@border-radius-base`	Радиус скругления границ компонентов/поповеров	`4px`
`@border-color-base`	Цвет границ	`#d9d9d9`
`@box-shadow-base`	Тень компонента	`0 2px 8px rgba(0, 0, 0, 0.1)`

Переопределение стилей

В некоторых случаях вам может потребоваться более детальное переопределение стилей Ant Design. Этого можно добиться путем повышения специфичности CSS-селекторов или использования !important.

Приоритет CSS

Правила приоритета CSS определяют, какое правило вступает в силу, когда к одному и тому же элементу применяются несколько правил стиля. Приоритет от высшего к низшему:

Инлайновые стили (Inline styles)
Селекторы ID (#id)
Селекторы классов (.class), псевдоклассы (:hover) и селекторы атрибутов ([type="text"])
Селекторы элементов (div, h1 и т.д.) и псевдоэлементы (::before, ::after)
Универсальный селектор (*) и комбинаторы (descendant, child, adjacent sibling, general sibling)

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

!important может использоваться для повышения приоритета правила стиля, заставляя его вступить в силу. Однако чрезмерное использование не рекомендуется, его следует использовать только в крайнем случае.

.ant-btn {
  background-color: red !important;
}

Заключение

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