Ant Design CSS Style Override Guide

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

Theme Customization

Ant Design allows you to customize the overall style by configuring the theme, primarily 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 (for Vue CLI projects) or modify config-overrides.js (for CRA projects) at the project root with 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/layer 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 control over Ant Design styles. This can be achieved by increasing CSS selector specificity or using !important.

CSS Specificity

CSS specificity rules determine which rule is applied to an element when multiple rules target it. The priority order 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, it should only 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’s styles according to project needs to build a unique application interface. For more information, please refer to the Ant Design Official Documentation.