如何解决Ant Design CSS样式覆盖失败？

Ant Design主题变量修改无效的根本原因是Less编译链断裂，需确保变量在antd.less加载前注入、CSS引入顺序正确、构建工具配置modifyVars、路径准确、浮层挂载合理、选择器权重适配，并重启开发服务器。

Ant Design主题变量改了但颜色还是蓝色

根本不是@primary-color写错了，而是 Less 编译链断了。Ant Design 的变量必须在antd.less加载前被解析注入，否则所有组件都按默认值编译完了，你改的变量根本没参与编译。

1. 别在Button.module.less里重定义@primary-color——作用域太窄，不参与全局主题构建
2. 别在import 'antd/dist/antd.css'之后再import自定义样式——CSS 已静态生成，变量覆盖无效
3. 用 CRA 却没配craco-less或lessOptions.modifyVars——Webpack 根本没把你的变量传给less-loader
4. @import '~antd/lib/style/themes/default.less'路径少个/或拼错themes——导入失败，后续所有变量声明全跳过

自定义样式写好了但页面没反应

CSS 生效顺序 = 引入顺序 = 打包后<link>标签顺序。如果你的样式在 Ant Design 样式之后加载，哪怕写了!important也会被盖掉。

1. Vite 项目：检查main.tsx中是否先import 'antd/dist/reset.css'再import './index.css'；顺序反了就得调换
2. Webpack 项目：确保自定义 CSS 在入口文件中最后import，且没被style-loader或插件提前处理
3. React 项目用了CSS Modules或styled-components？它们会加属性选择器（如div[data-v-abc123]），你写的.ant-btn根本匹配不到真实 DOM
4. 浏览器开发者工具中看「Styles」面板，找带删除线的规则，悬停看specificity is lower than another rule和四元组值（如0,1,1,0）

Popover、Table 表头等浮层样式不生效

这类组件渲染位置脱离当前 DOM 上下文（默认挂载到body），导致 scoped 样式或局部类名失效。

1. 不要靠/deep/或去掉scoped硬怼——影响范围不可控，容易污染其他组件
2. 优先用getPopupContainer把浮层挂载到当前容器内：getPopupContainer={() => document.getElementById('my-container')}
3. 或用overlayClassName给浮层加专属类名，再在全局样式里限定作用域：.my-popover .ant-popover-title { background: red; }
4. Ant Design 5.x 的:where()会主动降低选择器权重来兼容旧项目，此时可临时启用<StyleProvider hashPriority="high">移除:where()封装

ConfigProvider 主题设置后部分组件颜色仍不对

Ant Design 5.x 的主题 token 只影响底层变量计算，不直接改 CSS 类名权重。子组件可能用了更具体的选择器（比如.ant-btn-primary.ant-btn），把 token 生成的颜色压掉了。

1. 打开开发者工具「Computed」面板，确认生效的colorPrimary是不是来自你传入的theme.token
2. 如果被覆盖，大概率是组件内部规则特异性更高，此时需用精准选择器兜底，例如.my-form .ant-form-item .ant-input:focus
3. 避免在组件内用style={{ color: '#1890ff' }}硬编码——绕过主题系统，后期维护成本陡增
4. 运行时切换主题时，注意旧的<style>标签可能未被移除，手动清空或确保ConfigProvider重新挂载

实际项目里最常被忽略的是：变量修改后没重启开发服务器，或热更新没触发全局变量重计算——哪怕代码全对，也得保存一个空格强制刷新一次。