Ant Design v6 的开发过程中,由于不需要再考虑 IE 的兼容问题,我们对部分组件改造使用了 CSS 变量获得了更小的 CSS 体积以及更好的性能。今天我们来聊聊 CSS 变量的一些小事。
变体
在 v5 中一些组件支持 variant
属性来实现不同的样式,Button 组件就是一个典型例子:

(配合 color
实现了不同的按钮组合)
在 v5 中,Button 的变体与颜色组合会创建一套重复的排列组合样式:
css.ant-btn-solid.ant-btn-red {
.ant-btn-solid.ant-btn-blue {
.ant-btn-outlined.ant-btn-red {
.ant-btn-outlined.ant-btn-blue {
转换成 CSS 变量后,逻辑就会从样式转成对色板的控制。因而在定义完一套基础色板后,就可以通过变量简单的量产样式:
css color: var(--ant-btn-color);
background: var(--ant-btn-background);
border-color: var(--ant-btn-border-color);
--ant-btn-background: var(--ant-color-solid);
--ant-btn-color: var(--ant-color-solid);
--ant-btn-border-color: var(--ant-color-solid);
样式覆盖
在 CSS 变量下,用户侧的样式覆盖也变得更简单了。过去开发者覆盖一个样式需要对各个状态进行覆盖,同时还需要考虑优先级覆盖的情况:
css.ant-btn-solid.my-btn:not(:disabled) {
.ant-btn-solid.my-btn:not(:disabled):hover {
.ant-btn-solid.my-btn:not(:disabled):active {
.ant-btn-outlined.my-btn:not(:disabled) {
.ant-btn-outlined.my-btn:not(:disabled):hover {
.ant-btn-outlined.my-btn:not(:disabled):active {
而覆盖 CSS 变量则简单很多:
css.ant-btn-outlined.my-btn {
--ant-color-solid-hover: #e00;
--ant-color-solid-active: #d00;
条件兼容
v6 为了实现语义化结构,我们对大量组件的 DOM 结构进行了调整,同时也将 v4 至 v5 迁移时的 less 变量兼容提供的对应 Component Token 进行了清理(更多的数值通过计算生成而不是让开发者手工来配置)。但是为了避免对现有用户造成影响,我们是希望尽可能的兼容。
其中一个例子就是某个 token 存在的时候,我们使用另一种样式:
一个想法是在组件中根据 token 的存在与否来添加一个额外的 className
:
jsx const { token } = useToken();
if (token.components.sample.customVar) {
但是遗憾的是,组件的 token 在 useToken
中并不存在。它只有在组件的渲染 effect 中才会异步生成从而避免无用的性能浪费。因而在 CSS 中条件判断会是个更好的选择,这里就不卖关子了,使用 @container
便可以实现条件判断:
css@container style(--custom-var) {
需要注意的是,@container
的 CSS 变量查询目前 Firefox 尚未支持。所以在 v6 中,我们并不会把主要的功能放在 @container
上,而是作为一个兼容兜底逻辑来使用。
@scope
如果说 CSS 中最诱人的属性是什么,那可能非 @scope
莫属了。v5 中,我们使用 :where
来实现 CSS 的命名空间,从而实现多个版本或者主题的 antd 组件的样式隔离:
但是这对于嵌套逻辑来说,偶尔会有一些问题。比如下面的例子中,Theme1
对 span
的样式会影响 Theme2
:
css:where(.css-BamBoo).component-a span {
:where(.css-LIghT).component-b {
tsx<div className="component-a css-BamBoo">
<div className="component-b css-LIghT">
而 @scope
则可以完美的解决这个问题:
css@scope (.component-a) to (span) {