CSS类名冲突难缠因框架样式隔离机制不兼容：Vue用scoped属性选择器，React用CSS-in-JS动态类名，混用导致样式错乱；需用postcss-prefixwrap物理隔离或Shadow DOM彻底隔离，但后者有挂载和第三方组件适配问题。
为什么 css 类名冲突在多框架共存时特别难缠
因为现代框架（如 Vue、React、Angular）默认不隔离样式作用域，button { color: red } 这种全局规则会污染所有框架的 button 元素。更麻烦的是，有些框架（比如 Vue 的 <style scoped></style>）靠属性选择器模拟隔离，而另一些（如纯 CSS-in-JS 库）靠动态生成类名——它们底层机制不兼容，硬凑一起就容易出现「A 框架的按钮变红了，B 框架的按钮却失效」这类现象。
用 CSS Modules + postcss-prefixwrap 做物理隔离
这不是“加个 scope”就能解决的事，得给每套框架的 DOM 加上唯一容器前缀，再让 CSS 只作用于该前缀内。核心是两步：先用 postcss-prefixwrap 把整套 CSS 规则包裹进 .vue-app {} 或 .react-root {}；再确保对应框架的根节点真有这个 class。
- Vue 项目打包前，在
vue.config.js中配置css.postcss.options.plugins加入postcss-prefixwrap('.vue-app') - React 项目用
craco或自定义 webpack config，对src/react-app/下的 CSS 文件单独走一遍postcss-prefixwrap('.react-root') - 务必检查最终 HTML：Vue 根节点是
<div id="app" class="vue-app">，React 是 <code><div id="root" class="react-root">，否则前缀无效 <li>注意 <code>@import和@layer规则会被postcss-prefixwrap忽略，这类跨文件引用得手动挪进对应前缀块里 - Vue 3 要用
createApp(...).mount(el.attachShadow({mode: 'open'}))，不能直接 mount 到#app - React 需要封装一层
CustomElement，用ReactDOM.createRoot(shadowRoot)渲染，且无法直接用useEffect监听父页面事件 - 第三方 UI 组件（比如 Ant Design）可能内部依赖 document.body 插入弹层，一旦进了 Shadow DOM 就找不到 body，导致
Modal、Tooltip渲染失败 - 调试时 DevTools 里得手动点开
才能看到样式，排查成本翻倍 - 所有框架统一禁用
!important，靠 specificity（选择器权重）和加载顺序控优先级 - 避免用
document.querySelector直接改style属性，改用 class 切换（el.classList.add('active')） - 如果必须动态样式，用 CSS 自定义属性（
--bg-color），由各框架通过style="--bg-color: red"注入，这样不会和外部规则打架
Shadow DOM 是最干净的解法，但不是所有场景都适用
Shadow DOM 天然样式隔离，连 :host 和 ::slotted 都能控制穿透逻辑。但它要求你把框架挂载进 shadowRoot，而不是普通 div —— 这意味着：
别碰 !important 和 style 属性内联样式
多框架混排时，!important 会彻底打乱优先级预期。比如 Vue 组件设了 button { background: blue !important }，React 组件用 JS 动态设 el.style.background = 'red'，结果还是蓝的——因为内联样式本该赢，但被 !important 截胡了。
立即学习“前端免费学习笔记（深入）”；
.vue-app，下一次加载时旧样式还在，新老规则叠在一起，连 getComputedStyle 都查不出问题在哪。
