Ant Design 5.12.0+ 紧凑模式真正生效的CSS变量包括--ant-size-sm、--ant-control-height-sm、--ant-padding-xs/sm、--ant-margin-xs/sm；--ant-tabs-horizontal-padding等为废弃变量，修改无效。
Ant Design 5.12.0+ 开启 cssVar: true 后，紧凑模式不再依赖 hack 式覆盖或 scoped 深度选择器，而是直接通过修改 CSS 变量控制全局间距体系——但必须清楚哪些变量真正生效、哪些只是“装饰性别名”。
哪些 CSS 变量能真正缩小 Tabs / Table / Form 的间距？
Ant Design 的紧凑布局效果主要由 size 衍生变量驱动，而非单个 padding 或 margin。实际起效的种子变量（Seed Token）包括：
-
--ant-size-xs：用于最小尺寸组件（如紧凑型Input、Select下拉项） -
--ant-size-sm：影响Button、Tag、Tabs标签高度和内边距 -
--ant-padding-xs、--ant-padding-sm、--ant-margin-xs等：直接控制组件内外边距基数 -
--ant-control-height和--ant-control-height-sm：决定表单控件默认高度，Tabs的.ant-tabs-nav高度也受其影响
注意：--ant-tabs-horizontal-padding 这类变量在 5.12+ 中已废弃，它不参与任何计算逻辑，仅作为文档占位符存在；改了也不会生效。
如何安全地动态注入并切换紧凑变量？
不能直接在 :root 里写死，否则会破坏主题切换能力。正确做法是利用 ConfigProvider 的 theme 配置，在运行时注入变量值：
import { ConfigProvider } from 'antd';
const compactTheme = {
cssVar: { key: 'compact' },
token: {
controlHeight: 24,
controlHeightSM: 20,
paddingXS: 4,
paddingSM: 6,
marginXS: 2,
marginSM: 4,
}
};
// 使用时
<configprovider theme="{compactTheme}"><tabs></tabs><form></form>
</configprovider>
关键点：
-
cssVar: { key: 'compact' }必须带key，否则变量不会挂载到:root[data-compact]下，导致样式不生效 - 所有数值单位省略
px，CSS 变量只接受纯数字（24而非24px） - 修改
controlHeight会联动影响Input、Select、DatePicker等所有表单控件，但Tabs的导航栏高度需额外设置tabsBarHeight（它不是 CSS 变量，而是组件 props）
为什么改了变量，Tabs 还是没变紧凑？
常见失效原因不是变量没生效，而是组件未响应这些变量。Tabs 组件本身对 token.padding* 不敏感，它只认两个地方：
-
size="small"属性（硬编码映射到--ant-tabs-height: var(--ant-control-height-sm)） -
tabBarStyle手动传入{ height: '20px', padding: '0 6px' }—— 此时 CSS 变量被绕过
所以真正解法是组合使用：
<tabs size="small" tabbarstyle="{{" padding: var></tabs>
这样既用上了 size 触发内部变量，又用 CSS 变量控制具体数值，避免 magic number。
最易忽略的一点：CSS 变量只作用于启用 cssVar 的 ConfigProvider 子树。如果你在 App 外层套了另一个未开启 cssVar 的 ConfigProvider，变量会被覆盖或隔离——检查浏览器 Elements 面板中 :root 是否出现对应 data-xxx 属性，这是验证是否进入变量作用域的唯一可靠方式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
