直接给第三方类名加前缀会失效，因其破坏样式选择器链、导致动态状态丢失、覆盖交互逻辑且无法注入DOM；应采用wrapper容器隔离、:deep()/:global()穿透或属性选择器限定作用域。
第三方库的类名不能硬加项目前缀，否则会破坏其内部选择器链、导致动态状态失效（比如 .el-button.is-disabled 匹配失败），而且每次升级都得手动对齐类名结构——这不是隔离，是给自己埋雷。
为什么直接给第三方类名加前缀会失效
Element Plus、Ant Design 这些库的样式依赖精确的类名组合和层级关系。你把 .el-input__inner 改成 .myapp-el-input__inner，它就再也匹配不上 .el-input.is-focus .el-input__inner 这类运行时生成的选择器。
-
.el-select__popper是浮层容器，但它的显示/隐藏由 JS 动态控制 class，前缀一加，所有 popper 样式全丢 - Ant Design 的
.ant-btn:focus-visible规则会被你自定义的.myapp-ant-btn:focus覆盖，但又没继承 focus-visible 逻辑，交互体验直接降级 - Webpack CSS Modules 或 Vue
<style scoped>下，.myapp-ant-btn根本不会注入到 DOM，因为第三方组件自己没写这个 class
用 wrapper block 做语义隔离才是最小侵入解法
不改第三方组件任何代码，只在它外层套一个带业务语义的容器，所有定制样式都基于这个上下文展开。
- Vue 模板里写：
<div class="my-dashboard__date-picker-wrapper"><ADatePicker /></div> - CSS 中必须写成：
.my-dashboard__date-picker-wrapper .ant-picker-input input（注意空格！不是.my-dashboard__date-picker-wrapper.ant-picker-input） - React + CSS Modules 中，要显式暴露第三方类：
:global(.ant-picker-input) { border-radius: 4px; } - Vue
<style scoped>下，:deep(.ant-picker-input)才能穿透作用域
当 wrapper 也不够用时，用属性选择器软拦截
某些老版本 UI 库不支持 classNamePrefix，也没法包裹 wrapper（比如全局 message 提示），就得靠 CSS 属性选择器做轻量级拦截。
- 限定作用域再匹配：
.myapp-ui [class^="ant-"]，比裸写[class^="ant-"]安全得多 - 用
[class^="ant-"]（开头匹配），不用[class*="ant-"]（包含匹配），避免误伤content、plant等词 - Webpack css-loader 开启
modules: true时，需在文件顶部加注释：/* webpackMode: "global" */ - Vue
<style scoped>不支持属性选择器穿透，必须改用<style module>或显式写:global([class^="ant-"]) { }
真正难的不是写对选择器，而是守住「不碰第三方 class 属性」这条线——一旦开始魔改 class 名，后续每次 npm update 都得人工核对变更日志，而 wrapper + :deep() / :global() / 属性选择器这套组合，才能让升级变成 npm update 后自动生效的事。
