Ant Design CSS样式覆盖指南

该页面提供了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 官方文档。