ant design 样式覆盖失效的根本原因是编译链断裂或作用域错位：变量未进入 antd.less 编译上下文、dom 节点未匹配、导入顺序错误、:where() 权重压制或容器 class 缺失。
Less 变量重定义或选择器覆盖在二次封装中失效，根本不是“没写对”，而是编译链断裂或作用域错位——变量没进 antd.less 编译上下文，或你的样式压根没匹配到真实 DOM 节点。
变量重定义写在 antd.less 之后就等于没写
Ant Design 的样式是编译期确定的：antd.less 一加载，所有组件就按当时已知的 @primary-color 值生成 CSS。你后写的 @primary-color: #ff6b35 完全不参与编译。
- 必须严格按顺序写：先
@import '~antd/lib/style/themes/default.less'（基底），再重定义变量（如@primary-color: #ff6b35），最后@import '~antd/dist/antd.less' - 路径少一个
/（比如写成~antd/lib/style/themes/default.less）会静默失败，后续变量全报Variable is undefined - 不能拆到不同文件里——
theme.less必须是一个完整、线性拼接的文件，且在index.tsx最顶部、任何其他import之前引入 -
import 'antd/dist/antd.css'必须彻底删除，它和 Less 编译链互斥，留着就必然失效
::v-deep() 或 :deep() 括号里写了复合选择器就直接失效
Vue 3 中 ::v-deep(.ant-btn-primary.ant-btn) 看似合理，但括号内只支持简单选择器（单类名、单标签、单属性）。复杂写法会被预处理器忽略，DevTools 里根本看不到这条规则。
- 正确写法是
::v-deep(.ant-btn-primary)或::v-deep(.ant-btn)，然后靠父容器类名提升权重 - 打开 DevTools → Elements → 找到目标元素 → 右键「Copy selector」，粘贴出来的真实 class 名填进去，别靠猜
- 如果组件渲染出的是
<button class="van-button van-button--primary"></button>，你只写::v-deep(.van-button)就漏掉了状态类，得补上::v-deep(.van-button--primary)
& & 嵌套提权但容器没挂 class 就白搭
.my-app { & & { .ant-btn { color: red; } } } 编译为 .my-app.my-app .ant-btn，权重升到 20，确实能压过 .ant-btn（权重 10）。但前提是 DOM 上真有 class="my-app"。
- 普通组件：手动在包裹层加
class="my-app"，例如<div class="my-app"><datepicker></datepicker></div> - 弹窗、Tooltip、Select 下拉等挂载到
body的组件：必须用 JS 在挂载后给生成的节点也加上my-app类，否则规则不生效 - 别用
[class^="ant-"]这类泛匹配——容易误伤my-ant-custom；改用[class*="ant-btn"]更稳妥 - React 项目中若用了 CSS Modules，需显式写
:global(.ant-btn)，否则& &嵌套仍被模块化拦截
ConfigProvider 主题 token 生效但样式被压，其实是 :where() 在作祟
Ant Design 5.x 默认用 :where() 包裹所有选择器（如 :where(.ant-btn)），把权重强制降到 0，方便兼容老项目。但这会让传入的 theme.token.colorPrimary 生成的规则，轻易被更具体的选择器（如 .ant-btn-primary.ant-btn）覆盖。
- 检查 DevTools 「Computed」面板，确认生效的 color 是否来自你传入的 token
- 紧急修复可用
<styleprovider hashpriority="high"></styleprovider>，它会移除:where()封装，让权重回归正常 - 注意：开启后 IE11 等旧浏览器无法降级，得权衡兼容性
- 别指望 ConfigProvider 单独解决 CSS 覆盖问题——它只管变量注入，不管选择器权重
最常被忽略的一点：你以为在改组件库样式，其实是在和构建工具的导入顺序、编译时机、DOM 实际结构三者博弈。变量声明位置、深度选择器语法细节、容器 class 是否真实存在——任何一个环节断掉，覆盖就静默失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
