直接用.third-party-class { color: red; }常失效，根本原因是第三方样式加载顺序靠后、选择器特异性更高（如[class^="ant-"]或:not()强化），或构建注入导致你的规则被覆盖；必须通过提升特异性（如.my-app .third-party-class）、正确@import顺序、&:extend(... all)或属性选择器（如[class*="ant-table-row-"]）安全覆盖。
为什么直接在Less里用.third-party-class { color: red; }经常失效
第三方库（比如 Ant Design、Bootstrap）的CSS通常通过构建流程注入，样式优先级高，或被:not()、[class^="ant-"]等属性选择器强化；更常见的是，它们的样式在你的Less文件之后加载，导致你的规则被覆盖。不是写法错，是加载顺序和特异性输了。
实操建议：
- 确认第三方样式是否通过
import引入到你的主Less入口（如index.less），且你的自定义样式@import语句放在它后面 - 避免用纯类名覆盖，改用更高特异性：比如第三方写
.btn，你写.my-app .btn或body .btn - 必要时加
!important——但只用于调试定位，上线前应转为提升特异性或用data-属性控制
用&嵌套和extend复用第三方类行为
Less的&能帮你精准锚定上下文，extend可继承原样式再叠加修改，比全量重写更安全。
示例：想改Ant Design按钮的禁用态文字颜色：
.my-button {
&:extend(.ant-btn all);
&.ant-btn-disabled {
color: #999 !important;
}
}
注意点：
-
extend必须带all才继承所有匹配规则（含伪类、媒体查询） - 如果第三方类本身用了
!important（如.ant-btn:focus里的outline），你的extend无法覆盖，得用更高特异性+!important - Webpack中若开启
css-loader?modules，extend可能失效——此时应回退到手动复制关键声明
如何安全地覆盖带动态类名的第三方组件（如ant-table-row-1）
这类类名由JS运行时生成，无法预测后缀数字，也不能靠extend命中。必须用属性选择器或通配类名匹配。
可行方案：
- 用
[class*="ant-table-row-"]匹配所有含该前缀的类（但性能略差，慎用于高频渲染区域） - 给容器加稳定
data-属性，如<div data-my-table>，然后写<code>div[data-my-table] [class*="ant-table-row-"] { ... } - 在组件外层包裹自定义类，并用
&嵌套降级：.my-table { .ant-table { .ant-table-row { ... } } } - 只
@import你需要的模块，比如只改按钮就只引~antd/lib/button/style/index.less，别引~antd/dist/antd.less - 用
@import (reference)导入第三方Less文件——它只提供变量和混合宏，不输出CSS，适合做样式基底 - 若第三方未暴露独立模块（如某些私有UI库），用
postcss-import替代Less的@import，配合from选项精确提取
别碰/deep/或::ng-deep——那是Vue/Angular专属，Less不识别，写了也白写。
编译后CSS体积暴增？检查@import路径和reference模式
很多人把第三方Less源码整个@import进来只为覆盖几行，结果把整套变量、混合宏都编译进去了。
正确做法：
真正难的不是怎么写，是怎么让重写不污染全局、不拖慢构建、不随第三方版本升级突然崩掉——留好/* @todo: antd v5 升级后需验证 */注释，比写一百行!important有用得多。
