硬加前缀会破坏第三方样式，因其强依赖类名结构和JS动态添加的class；应采用wrapper语义隔离、属性选择器或正确加载顺序来安全定制。
直接给第三方类名加前缀（比如把 .el-button 改成 .myapp-el-button）不仅无效，还会让禁用态、浮层、焦点等动态样式全部失效——这不是隔离，是主动破坏。
为什么硬加前缀会让第三方样式彻底崩掉
Element Plus、Ant Design 这些库的 CSS 规则强依赖类名结构和层级关系。例如：
-
.el-button.is-disabled用来控制禁用样式，你改成.myapp-el-button.is-disabled，但 JS 只加.el-button.is-disabled，这个 class 根本不会出现 -
.el-select__popper是运行时由 JS 动态插入的 DOM 容器，你没法提前在 HTML 里写.myapp-el-select__popper - Webpack CSS Modules 或 Vue
<style scoped></style>下，.myapp-el-button根本不会被注入到 DOM，因为第三方组件没声明这个 class
用 wrapper block 做语义隔离（最稳妥）
不改第三方组件任何代码，只在外层套一个带业务语义的容器，所有定制都基于这个上下文展开：
- Vue 模板：
<div class="my-dashboard__date-picker-wrapper"><adatepicker></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></style>：必须用:deep(.ant-picker-input)才能穿透作用域
属性选择器做轻量级拦截（wrapper 不适用时）
某些全局提示（如 $message）、老版本 UI 库不支持 classNamePrefix，也没法包裹 wrapper，就得靠属性选择器：
立即学习“前端免费学习笔记（深入）”；
- 用
[class^="ant-"]（开头匹配），不用[class*="ant-"]（包含匹配），避免误伤content、plant等词 - 限定作用域再匹配：
.myapp-ui [class^="ant-"]比裸写[class^="ant-"]安全得多 - Webpack css-loader 开启
modules: true时，需在文件顶部加注释：/* webpackMode: "global" */ - Vue
<style scoped></style>不支持属性选择器穿透，必须改用<style module></style>或显式写:global([class^="ant-"]) { }
CSS 加载顺序比 !important 还关键
很多人写了 !important 还是盖不过第三方样式，问题大概率出在加载顺序上：
- Vite 项目中，如果在
main.ts里先import 'element-plus/dist/index.css'，再import './style/index.css'，那你的样式永远在 Element Plus 后面，!important也白搭 - 检查入口文件中的
import顺序：第三方库 CSS 必须在你项目样式之前引入 - Webpack/Vite 打包后，
<link>标签顺序决定层叠优先级——后加载的 CSS 规则天然覆盖先加载的
真正难的不是写对选择器，而是守住「不碰第三方 class 属性」这条线。一旦开始魔改类名，就等于放弃维护可控性——每次库升级，你都得重新对齐内部结构。wrapper + :deep() 或属性选择器，才是可持续的解法。
