如何在 Ant Design 中实现组件样式自定义？

你目前使用的外层包裹自定义class、覆盖AntD内置类名的方案是可行的，除此之外还有以下几种更高效的实现方式，不需要频繁审查元素查类名：

1. 官方ConfigProvider主题配置 #

这是AntD官方首推的自定义方案，支持全局/局部生效，直接通过配置变量修改样式：

• 全局配置：在应用根组件外层包裹ConfigProvider组件，修改theme字段下的token即可调整全局通用样式，也可以通过components字段针对单个组件设置专属样式，比如要修改Layout.Header的背景色、高度，直接配置components.Layout.headerBg、components.Layout.headerHeight属性即可，完全不用手动查找类名。
• 局部配置：如果只需要修改单个页面/模块的组件样式，只在对应模块外层套ConfigProvider即可，不会影响其他模块的组件表现。

2. CSS-in-JS封装组件 #

如果项目使用styled-components、Emotion等CSS-in-JS库，可以直接封装AntD组件生成自定义样式的新组件，不需要额外加外层div：

import { Layout } from 'antd';
import styled from 'styled-components';

// 自定义Header组件
const CustomHeader = styled(Layout.Header)`
  background: #ffffff;
  height: 70px;
  line-height: 70px;
  padding: 0 32px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
`;

// 组件内直接使用
<CustomHeader>头部内容</CustomHeader>

3. CSS Modules局部覆盖 #

如果项目使用CSS Modules，直接给AntD组件添加自定义class，在对应的样式文件里写样式即可：

import { Layout } from 'antd';
import styles from './index.module.css';

// 组件内使用
<Layout.Header className={styles.header} />

/* index.module.css */
.header {
  background: #ffffff !important;
  height: 70px;
}

如果样式优先级不够可以加!important，或者嵌套一层选择器提升优先级即可，不需要查找AntD内置类名。

4. 内置类名覆盖优化 #

如果你还是习惯使用覆盖内置类名的方案，可以直接查AntD官方文档中每个组件的「CSS类名」和「样式变量」列表，官方已经将所有可修改的类名、变量整理公开，不用每次都在浏览器中审查元素。

内容的提问来源于stack exchange，提问作者JtaDD