按钮仍为蓝色是因为未启用cssvar: true，此时var(--ant-color-primary)未注入，颜色由硬编码css值决定；启用后还需确保每层configprovider独立配置cssvar: true和token，并避免选择器范围过宽导致变量被覆盖。
为什么var(--ant-color-primary)改了但按钮还是蓝色？
不是变量没生效，而是它根本没被组件消费到。Ant Design 5 默认用 CSS-in-JS 生成样式，var(--ant-color-primary)只在开启cssVar: true后才注入；没开时，所有颜色都是硬编码的 CSS 值，改变量等于改空气。
常见错误包括：
- 只在
ConfigProvider里写了theme.token.colorPrimary，但漏掉cssVar: true - 用了 React 17 或更低版本，却没给
cssVar配key，导致变量作用域冲突、被覆盖 - 在 Shadow DOM 容器（如 Web Component 封装的页面）里使用，而
ConfigProvider挂载在外部，CSS 变量穿不进去
@import 'antd/dist/antd.less'和cssVar: true能混用吗？
不能。这是两条完全隔离的主题链路：前者走 Less 编译期变量替换，后者走运行时 CSS 变量注入。混用会导致样式来源混乱——比如按钮背景走 CSS 变量，但边框圆角仍按 Less 编译出的固定值渲染，视觉割裂。
选择依据很明确：
- 需要服务端渲染（SSR）或主题切换无闪动 → 用
cssVar: true+theme.token - 项目已重度依赖 Less 主题定制（如大量
modifyVars逻辑）→ 关掉cssVar，专注维护theme.less加载顺序 - 同时存在第三方插件直接读取
getComputedStyle获取--ant-*→ 必须开cssVar，否则它们拿不到实时值
开发者工具里看到var(--ant-color-primary)，但colorPrimary改了没反应
说明变量已注入，但被更高权重的选择器压住了。Ant Design 5 的 CSS-in-JS 默认用:where()封装类名来降权兼容旧项目，结果就是你自定义的.my-btn .ant-btn比:where(.ant-btn)权重高，反而赢不了。
紧急修复方法只有这个：
- 加
<styleprovider hashpriority="high"></styleprovider>包裹根节点，它会移除:where()包装，让 antd 类名恢复原始权重 - 别在
theme.token里只改colorPrimary就以为万事大吉——按钮的border-color、hover色、disabled文本色全由它派生，但text-color这种非派生变量得单独设 - 检查 computed 样式面板里真正生效的
color值，看它来自哪条规则；如果显示inherit或initial，大概率是父级容器断了变量继承链
为什么ConfigProvider嵌套后子主题的var(--ant-color-primary)不更新？
Ant Design 的嵌套主题确实支持 token 继承，但 CSS 变量不会自动重注册——父级ConfigProvider注入的--ant-color-primary会被子级同名变量覆盖，而不是合并。更麻烦的是，如果子主题没显式声明cssVar: true，它甚至不会尝试注入变量，直接沿用父级的旧值。
必须手动保障两点：
- 每一层
ConfigProvider都要独立配置theme={{ cssVar: true, token: { colorPrimary: '#xxx' } }} - React 18 下可依赖
useId自动隔离，但若用了key手动指定，子主题的key必须和父级不同，否则变量名冲突（如都叫--ant-color-primary-app）
最易忽略的一点：CSS 变量是全局作用域，没有“局部变量”概念。所谓嵌套生效，其实是靠key生成不同变量名（如--ant-color-primary-theme-a），再靠选择器范围限定生效区域——一旦选择器写宽了，就又串了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
