Ant Design CSS Override Guide

This page provides a detailed guide on overriding Ant Design styles, including how to customize component styles, configure themes, and handle CSS priorities.

Theme Customization

Ant Design allows you to customize the overall style by configuring a theme. Theme configuration is mainly achieved through Less variables.

Configuration Method

Install less and less-loader in your project:
```
npm install less less-loader --save-dev
```

Create vue.config.js at the project root (for Vue CLI projects) or modify config-overrides.js (for CRA projects) and add the following code:

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 Variables

Ant Design provides a series of Less variables for theme customization. Common variables include:

Variable	Description	Default Value
`@primary-color`	Primary color	`#1890ff`
`@link-color`	Link color	`@primary-color`
`@success-color`	Success color	`#52c41a`
`@warning-color`	Warning color	`#faad14`
`@error-color`	Error color	`#f5222d`
`@font-size-base`	Base font size	`14px`
`@heading-color`	Heading color	`rgba(0, 0, 0, 0.85)`
`@text-color`	Primary text color	`rgba(0, 0, 0, 0.65)`
`@text-color-secondary`	Secondary text color	`rgba(0, 0, 0, 0.45)`
`@disabled-color`	Disabled color	`rgba(0, 0, 0, 0.25)`
`@border-radius-base`	Component/popover border radius	`4px`
`@border-color-base`	Border color	`#d9d9d9`
`@box-shadow-base`	Component shadow	`0 2px 8px rgba(0, 0, 0, 0.1)`

Style Overriding

In some cases, you may need more granular overrides of Ant Design styles. This can be achieved by increasing the specificity of CSS selectors or using !important.

CSS Priority

CSS priority rules determine which rule takes effect when multiple style rules are applied to the same element. The priority from high to low is:

Inline styles
ID selectors (#id)
Class selectors (.class), pseudo-classes (:hover), and attribute selectors ([type="text"])
Element selectors (div, h1, etc.) and pseudo-elements (::before, ::after)
Universal selector (*) and combinators (descendant, child, adjacent sibling, general sibling)

Using !important

!important can be used to increase the priority of a style rule, forcing it to take effect. However, overuse is not recommended and it should be used as a last resort.

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

Conclusion

Through theme customization and style overriding, developers can flexibly adjust Ant Design styles according to project requirements and create unique application interfaces. For more information, please refer to the Ant Design Official Documentation.