微前端CSS隔离常失效是因为框架默认仅隔离JS，CSS全局注入导致样式污染；需结合strictStyleIsolation、execScripts劫持、动态样式拦截及CSS-in-JS配置等多层策略。
微前端里 CSS 隔离为什么总失效
因为多数微前端框架（如 qiankun、micro-app）默认只做 JS 沙箱隔离，CSS 是全局注入的——document.head 里追加的 <style> 或 <link> 标签天然不认“哪个模块写的”，浏览器只管解析渲染。
常见错误现象：button { color: red; } 在子应用 A 里定义，结果主应用和其他子应用的按钮全变红；或者子应用 B 的 .header 覆盖了子应用 C 的同名类。
- 不是所有“样式加载”都自动隔离：qiankun 的
loadMicroApp不处理 CSS 作用域，需手动干预 - Shadow DOM 能彻底隔离，但不兼容老项目（比如用了
getBoundingClientRect()或依赖全局样式穿透的组件） - PostCSS 插件（如
postcss-prefix-selector）在构建时加前缀，但无法覆盖运行时动态插入的样式（如 antd 的style标签）
qiankun 中用 execScripts + strictStyleIsolation 控制样式范围
qiankun v2.4+ 提供了 strictStyleIsolation: true，但它不是“开箱即用”的隔离，而是把子应用的 <style> 标签内容重写为 Shadow DOM 内部样式——前提是子应用挂载节点支持 Shadow DOM（现代浏览器 OK，IE 不行）。
更稳妥的做法是配合 execScripts 钩子劫持样式注入：
立即学习“前端免费学习笔记（深入）”；
registerMicroApps([
{
name: 'app-react',
entry: '//localhost:3001',
container: '#subapp-1',
activeRule: '/app1',
// 关键：接管样式加载
execScripts: (scripts, proxy, mount) => {
return Promise.all(
scripts.map(script => {
if (script.type === 'style') {
// 把 style 内容包裹进 scoped 容器，或改写选择器
return injectScopedStyle(script.content, 'app-react');
}
return script;
})
).then(() => mount());
}
}
]);
-
strictStyleIsolation对<link rel="stylesheet">无效，只处理内联<style> - 如果子应用用了 CSS-in-JS（如 emotion），需额外 patch
createCache，否则生成的 class 名仍可能冲突 - 开启该选项后，子应用内
document.querySelector('body')会找不到真实 body，因 Shadow DOM 创建了新根节点
运行时动态样式如何避免污染全局
很多 UI 库（如 antd、element-plus）会在组件挂载时往 document.head 注入样式，这类代码不会被 qiankun 的沙箱捕获，必须拦截。
实操建议：
- 在子应用
bootstrap阶段，重写document.head.appendChild，对传入的<style>或<link>节点打上模块标识，并记录引用关系 - 在
unmount时，根据标识精准移除对应样式节点（不能简单清空head，否则影响其他子应用） - 对 CSS-in-JS，例如 emotion，初始化时传入
key: 'app-react'，确保生成的data-emotion属性唯一 - 慎用
!important：它会绕过大多数作用域策略，尤其在多个子应用共用同一套主题变量时极易失控
PostCSS 构建时加前缀 vs 运行时 CSS-in-JS 的取舍
构建时加前缀（如 postcss-prefix-selector）适合纯静态样式，但无法解决运行时生成的样式问题；CSS-in-JS（如 styled-components）天然支持局部作用域，但会增加 bundle 体积和 SSR 复杂度。
选型关键看两点：
- 是否需要服务端渲染：styled-components 支持 SSR，但需在主应用中统一管理
ServerStyleSheet实例 - 是否已有大量全局样式依赖：如果子应用重度使用
html、body、input:focus等全局选择器，强行加前缀会导致样式丢失 - 性能差异：PostCSS 是构建时一次性处理，零运行时开销；CSS-in-JS 每次渲染都可能触发样式计算，对长列表页面有影响
最常被忽略的一点：子应用的 public/index.html 里如果有内联 <style>，它根本不会走任何构建或沙箱流程，直接插入 head——这种要手动抽成 JS 加载，或改用 import './index.css' 让打包器接管。
