必须将自定义变量放在第三方less文件之前导入，因变量声明后锁定，同名变量（不含!important）会被忽略；正确顺序为@import "variables.less";再@import "~antd/lib/style/themes/default.less";。
直接写 .ant-btn 或 .el-input 无法稳定覆盖第三方样式——因为它们的权重太低、加载顺序不可控、且没有 HTML 容器配合，几乎必然被覆盖或失效。
必须把自定义变量放在第三方 Less 文件之前导入
Less 变量一旦声明就锁定，后续同名变量（不含 !default）会被忽略。这不是“建议”，而是编译机制硬约束。
-
@import "variables.less";必须在@import "~antd/lib/style/themes/default.less";之前 - 所有变量统一加
!default，例如：@primary-color: #52c418 !default; - 禁止在
variables.less里@import其他含变量定义的文件，否则内部变量会悄悄覆盖你设好的值 - Webpack 的
modifyVars和文件导入别混用；若同时使用，modifyVars优先级更高，但 key 必须带@符号且完全一致（@text-color≠@TextColor）
用嵌套 & & 提升选择器权重，而不是 !important
!important 看似快，实则引发权重死循环，后续维护者再想覆盖就得加更多 !important，调试时 DevTools 里也难定位来源。
- 写法：
.my-page { & & { .ant-btn { color: #1890ff; } } }→ 编译为.my-page.my-page .ant-btn - 特异性从 10 升到 20，稳压大多数 UI 库默认规则（如
.ant-btn权重为 10） - 别手动写
.my-page .ant-btn .ant-btn：框架某天加个[type="button"].ant-btn就又失效 - 三层
& & &会产出冗余选择器，部分浏览器可能报 warning，两层足够
HTML 容器必须显式挂载顶层类名
Less 里的 .myapp-ui { .ant-btn { } } 编译后是 .myapp-ui .ant-btn，但如果你没在 DOM 上真实加 class="myapp-ui"，这条规则就完全不生效。
- 普通组件：确保包裹容器有该类，例如
<div class="myapp-ui"><datepicker></datepicker></div> - 弹窗/Tooltip 等挂载到
body的组件：必须用 JS 手动给生成的 DOM 节点也加上myapp-ui类 - 禁用 ID 或属性选择器做前缀（如
#root .ant-btn），ID 不可复用，属性选择器后期难维护 - Vue/React 中别依赖
scoped或 CSS Modules 自动加后缀——它们和 Less 命名空间不兼容，需显式写:global(.ant-btn)或关闭模块化
对不支持 classNamePrefix 的库，用属性选择器软拦截
老版本 Ant Design 或某些封闭 UI 库没法改类名前缀，只能从 CSS 层面“围追堵截”。
- 用
[class^="ant-"]（开头匹配）比[class*="ant-"]（包含匹配）更安全，避免误伤my-ant-custom - 示例：
.myapp-ui [class^="ant-"] .ant-btn { font-size: 14px; } - 这类规则要放在所有第三方样式之后、自定义样式之前，靠加载顺序+权重双重保障
- 注意：它不解决伪元素（如
::before）或内联 style 冲突，仅限 class 层面软隔离
最易被跳过的其实是 HTML 层——你写了十页 Less 命名空间，却忘了给根容器加 class，整套方案就形同虚设。样式覆盖不是纯 CSS 技巧问题，而是 HTML 结构、Less 编译顺序、运行时 DOM 三者严丝合缝的结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
