Less命名空间对第三方样式无效，因编译器只处理自有代码，不改写第三方输出的CSS；需用子选择器提升权重、运行时补类或构建时前缀重写等方案应对。
为什么Less命名空间对第三方样式完全无效
Less编译器只处理你写的代码，它不会、也不能重写第三方库输出的 CSS。你写 .myapp-ui { .btn { } }，编译后是 .myapp-ui .btn；但 Ant Design 输出的 .ant-btn 本身就不带 .myapp-ui 前缀，自然不受控制。这不是 Less 的缺陷，而是它的边界——它不干预外部 CSS 的选择器结构。
用子选择器提升权重精准捕获第三方类名
目标不是“改掉”第三方样式，而是“压过”它。CSS 权重规则下，.myapp-ui .ant-btn 比 .ant-btn 高一级，但还不够；.myapp-ui > .ant-btn 或 .myapp-ui [class^="ant-"] 才真正可控。
-
.myapp-ui > .ant-btn：只作用于直接子元素，避免误伤嵌套在.ant-modal内的按钮 -
.myapp-ui [class^="ant-"]：匹配所有以ant-开头的类（如ant-btn、ant-input），比[class*="ant-"]更安全，避免匹配到my-ant-custom - 慎用
!important：它会破坏可维护性，且无法解决动态插入的浮层（如 DatePicker 下拉）的样式覆盖时机问题
运行时手动补顶层类名到第三方挂载点
很多 UI 库（如 Ant Design、Element Plus）的弹窗、Tooltip、Select 下拉等默认挂载到 document.body，脱离你的 .myapp-ui 容器。此时 CSS 前缀完全失效，必须靠 JS 补类。
- 监听浮层 DOM 插入事件，例如：
document.addEventListener('DOMNodeInserted', handler)（注意兼容性）或更稳妥地用MutationObserver - 定位目标节点后手动加类：
node.classList.add('myapp-ui')，常见目标选择器：.ant-picker-dropdown、.el-popper、.react-datepicker-popper - 别依赖
setTimeout等轮询方式——浮层插入是异步的，但时机确定，MutationObserver 能精确捕捉
构建时剥离/重写第三方样式（进阶）
如果项目允许深度定制，可在构建阶段干预第三方 CSS 输出，而非 runtime 补丁。
立即学习“前端免费学习笔记（深入）”；
- Webpack +
postcss插件（如postcss-prefixwrap）：对node_modules/antd/dist/antd.css自动添加前缀，生成.myapp-ui .ant-btn - Vite 用户可用
vite-plugin-css-prefix，配置简单：prefix: '.myapp-ui' - 禁用第三方默认 CSS，改用其 Less 源码并
@import (reference)到你的命名空间块内——前提是该库提供可 import 的源文件（如 antd 提供antd/lib/style/index.less）
最麻烦的不是写法，而是第三方类名变更——比如某次升级把 .ant-modal-body 改成 .ant-modal-content，你的 [class^="ant-"] 还能兜住，但硬编码的选择器就断了。所以优先选语义稳定、前缀统一的库，或主动参与其样式 API 设计。
