Ant Design CSS样式覆盖指南

该页面提供了Ant Design样式覆盖的详细指南，包括如何定制组件样式、配置主题、处理CSS优先级等内容。

主题定制

Ant Design 允许通过配置主题来定制整体样式，主题配置主要通过 Less 变量实现。

配置方法

1. 在项目中安装 less 和 less-loader：

   npm install less less-loader --save-dev
   

2. 在项目根目录创建 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 变量用于主题定制，常用的变量包括：

样式覆盖

在某些情况下，可能需要对 Ant Design 的样式进行更细粒度的覆盖，这时可以通过增加 CSS 选择器的特异性或者使用 !important 来实现。

CSS 优先级

CSS 的优先级规则决定了当多个样式规则应用于同一元素时，哪一个规则会生效。优先级由高到低依次为：

1. 行内样式（Inline styles）
2. ID 选择器（#id）
3. 类选择器（.class）、伪类（:hover）和属性选择器（[type="text"]）
4. 元素选择器（div、h1 等）和伪元素（::before、::after）
5. 通配符选择器（*）和组合选择器（descendant、child、adjacent sibling、general sibling）

使用 !important

!important 可以用来提高某个样式规则的优先级，强制其生效。但不建议滥用，应作为最后的手段。

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

结语

通过主题定制和样式覆盖，开发者可以根据项目需求灵活调整 Ant Design 的样式，打造独特的应用界面。有关更多信息，请参考 Ant Design 官方文档。