直接改 --ant-primary-color 无效是因为 ant design 的 css 变量由 @ant-design/cssinjs 运行时按需注入，并非全局 :root，需定位其样式表用 insertrule 写入整套语义变量组，且必须使用 antd.variable.min.css 并禁用 babel-plugin-import 的样式自动导入。
直接改 --ant-primary-color 为什么没效果？
因为 Ant Design 的 CSS 变量不是全量注入到 :root 的，而是由 @ant-design/cssinjs 在运行时按需生成并插入特定样式表。单纯调用 document.documentElement.style.setProperty('--ant-primary-color', '#ff6b35') 大概率无效——目标元素根本没读这个值。
常见错误现象：开发者工具里能看到变量被设了，但按钮颜色纹丝不动；或者只改了主色，--ant-shadow-1、--ant-border-radius 这些关键变量仍沿用默认值，导致视觉割裂。
- 必须定位到 Ant Design 实际注入的样式表（通常含
ant-design或cssinjs字样），用insertRule写入完整规则块 - 不能只写单个变量，要覆盖整套语义组：比如改
colorPrimary，就得同步设置--ant-color-primary-hover、--ant-color-primary-active、--ant-color-primary-outlined - 深色模式下，
--ant-bg-base和--ant-color-text必须成对调整，否则弹窗背景还是白底，文字却变成浅灰，直接不可读
ConfigProvider 开启 cssVar: true 后仍不生效？
这是最常踩的兼容性坑：Ant Design 的 CSS 变量模式依赖 antd.variable.min.css，而不是旧版的 antd.min.css。如果你项目里还引用着后者，或者用了 babel-plugin-import 自动引入样式，那 cssVar: true 就是摆设。
使用场景：Vue3 项目用 ant-design-vue、React 项目用 antd，只要版本 ≥ 5.12.0，都必须切换基础样式入口。
- 删掉
import 'antd/dist/antd.min.css'，换成import 'antd/dist/antd.variable.min.css' - 禁用
babel-plugin-import的样式自动导入（它会强行加载非 variable 版本） - React 17 及以下必须传
key：theme={{ cssVar: { key: 'my-theme' } }}，否则变量注入位置错乱
如何提取完整的 Ant Design CSS 变量清单？
官方文档只列了常用变量，但真实渲染依赖上百个变量，比如 --ant-motion-duration-slow、--ant-zindex-affix、--ant-screen-xs —— 缺一个，动画卡顿或响应式布局就崩。
参数差异：变量名 ≠ JS token 名。例如 JS 里叫 borderRadius，CSS 变量是 --ant-border-radius；colorLink 对应 --ant-color-link，但 colorLinkActive 却映射为 --ant-color-link-active，后缀不统一。
- 打开
node_modules/@ant-design/cssinjs/dist/es/theme/default.css，全局搜索--ant-提取全部声明 - 重点关注带状态后缀的变量：
-hover、-active、-disabled、-outlined，漏掉会导致交互态失效 - 别信
theme.defaultJS导出对象——它不包含断点、z-index 分层、动画时长等底层变量
组件内部私有变量怎么覆盖？
像 Input.Password 的眼睛图标、DatePicker 的年份选择器滚动条，它们的颜色不走全局 --ant-color-icon，而是读组件 scope 内部计算出的 token.colorIcon，这个值压根没映射到 CSS 变量。
性能影响：硬写 .ant-input-password-icon 类选择器覆盖，会破坏 CSS-in-JS 的动态更新能力，主题切换时该图标颜色不会变。
- 用
getComputedStyle(el).getPropertyValue('--ant-color-icon')检查目标元素是否真应用了变量 - 若返回空字符串，说明该组件未接入变量体系，只能通过
components配置项单独定制：theme={{ components: { Input: { colorIcon: '#666' } } }} - 注意优先级：组件级 token > 全局 token > CSS 变量，所以
components配置必须和cssVar: true同时启用才有效
真正麻烦的不是变量数量，而是变量之间的隐式耦合——改一个圆角，可能连带影响所有 Popover、Tooltip 的箭头尺寸和阴影偏移。每次覆盖前，最好先在 DevTools 里用 Computed 面板反向追踪实际生效的变量链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
