Ant Design 5.12+ 必须开启 cssVar 才能生效变量修改，否则直接改 :root 中的 --ant-xxx 无效；需通过 ConfigProvider 的 theme={{ cssVar: true }} 或带 key 的 cssVar 配置启用，并配合 seed token（如 --ant-size-sm、--ant-padding-sm 等）调整间距，Tabs 高度还需单独设置 tabsBarHeight prop。
Ant Design 5.12+ 必须开启 cssVar 才能修改变量
不开启就直接改 :root 里的 --ant-xxx 是无效的——这些变量根本不会被组件读取。React 18 下最简写法是：
<ConfigProvider theme={{ cssVar: true }}>
<App />
</ConfigProvider>
React 17 或需带 key（否则多个主题会冲突）：
<ConfigProvider theme={{ cssVar: { key: 'myapp' } }}>
-
key缺失会导致变量挂载失败，浏览器里查不到:root[data-myapp] - 开启后，组件内所有尺寸、颜色、圆角等都会变成
var(--ant-xxx)形式，才能被后续覆盖 - 关闭 DevTools 的 “Disable cache” 容易误判变量未生效——刷新前先清缓存
哪些变量改了才真正影响 Tabs / Form / Table 间距？
别碰文档里写着但已废弃的变量，比如 --ant-tabs-horizontal-padding，它在 5.12+ 中完全不参与计算，改了等于没改。
真正起效的是这一组“种子变量（Seed Token）”，它们驱动整个间距体系：
立即学习“前端免费学习笔记（深入）”；
-
--ant-size-sm：控制 Button、Tag、Tabs 标签高度和内边距基数 -
--ant-control-height-sm：决定 Input、Select、DatePicker 等表单控件高度 -
--ant-padding-xs/--ant-padding-sm/--ant-margin-xs：直接影响组件内外边距 -
--ant-size-xs：用于最小尺寸场景（如紧凑型下拉选项）
Tabs 导航栏高度还依赖 tabsBarHeight 这个组件级 prop，不是 CSS 变量，得单独传。
动态切换紧凑模式：用 theme.token 而不是硬写 :root
直接在全局 CSS 里写 :root { --ant-padding-sm: 4 } 会破坏主题切换能力，下次换暗色主题时这个值还在，导致样式错乱。
正确做法是把变量值封装进 theme 对象，在运行时注入：
const compactTheme = {
cssVar: { key: 'compact' },
token: {
controlHeight: 24,
controlHeightSM: 20,
paddingXS: 4,
paddingSM: 6,
marginXS: 2,
marginSM: 4,
}
};
-
token里的数值单位必须省略px，写24，不能写24px -
cssVar.key必须存在，否则变量不会挂到:root[data-compact]下 - 修改
controlHeight会影响所有表单控件，但 Tabs 不响应它——得额外设tabsBarHeightprop
第三方组件没用你的变量？查它暴露的钩子名，别猜
像 Ant Design 这类库，对外暴露的变量名是固定的，但不同版本差异大。比如：
- v5.12+ 的紧凑模式变量是
--ant-size-sm，不是旧版的--ant-component-size - 第三方 UI 库（如 Arco、NutUI）压根不认
--ant-xxx，得去它文档查自己的命名，比如--arco-border-radius - 浏览器里搜
getComputedStyle(el).getPropertyValue('--ant-')可确认当前组件实际读取了哪些变量
最常被忽略的一点：组件是否真的“响应”你改的变量。很多组件只读几个核心变量（如 --ant-color-primary），其余全靠内部计算生成——改了 --ant-padding-sm，但组件压根不引用它，自然没反应。
