Documents
antd-override.zh-CN
antd-override.zh-CN
Type
External
Status
Published
Created
Jun 12, 2026
Updated
Jun 12, 2026
Source
View

如何更加优雅地覆写 antd 组件样式?#

基于 ConfigProvider 自定义#

antd 在 V5 提供了全新的 theme 属性用于自定义,因此如果需要自定义组件样式,建议优先采用 CP 上的 theme 字段。

示例 demo 如下:

antd-style 的 ThemeProvider 是基于 ConfigProvider 的业务层封装,提供业务友好的定制能力,查看:自定义主题

基本覆写#

createStyles 方法存在一个 prefixCls 参数,使用该参数可以传入组件的前缀,这样一来,任何的样式覆写都可以随着 prefixCls 的变化而自动变化。

抬升权重覆写#

在某些组件中,直接添加类名可能因为权重不够高,导致无法覆盖样式,此时可以通过 & 符号来抬升相应的权重。

多 classNames 场景覆写#

classNames 是 antd V5 的一个重头戏: [RFC] Semantic DOM Structure for all Components
在过去,我们要做样式定义,需要找很多 dom 节点进行大量的样式覆写,而 antd 版本升级的过程中,有时候会对 dom 结构进行调整。这样一来,我们覆写的样式就会出现问题。

而 classNames 将为我们提供一个稳定的 dom 结构 API ,我们可以通过 classNames 传入的类名,将会文档指向对应的 dom 节点,进而大大降低 DOM 变化带来的 Breaking Change 风险,同时也让我们不必再 hack 式地找样式类名。

相关讨论#

antd-override.zh-CN | Dosu