微前端子应用CSS注入必然导致样式冲突，因全局样式表无天然边界；qiankun的styledIsolation非“开启隔离”而是选择隔离机制：true为运行时加data前缀（依赖adoptedStyleSheets），{strictStyleIsolation:true}强制ShadowRoot封装（需限定DOM操作范围），false则完全不干预，须人工兜底。
微前端里子应用的 CSS 一旦直接注入 ，就必然和主应用或其他子应用“打架”——这不是配置没开对，而是全局样式表天然不带边界。
qiankun 的 styledIsolation 配置到底起什么作用
它不是“开启隔离”，而是决定用哪种机制去模拟隔离：
-
styledIsolation: true：启用运行时选择器重写（加 data 属性前缀），依赖浏览器支持CSSStyleSheet和adoptedStyleSheets（Chrome 73+、Firefox 96+、Safari 16.4+）；旧版 Safari 会静默降级为无隔离 -
styledIsolation: { strictStyleIsolation: true }：强制把子应用根节点塞进ShadowRoot，样式天然隔离，但所有 DOM 操作（包括第三方库挂载）必须限定在shadowRoot内，否则document.querySelector找不到元素 - 不配置或设为
false：完全不干预 CSS 加载，靠人工加前缀、css-modules或styled-components等方案兜底
micro-app 下 class 前缀为何还会失效
因为前缀只改 .btn 这类普通类名，对这些规则完全无效：
- 伪类选择器：
.btn:hover→ 沙箱只加成[micro-app-a] .btn:hover，而主应用的.btn:hover仍可能覆盖 - 全局选择器：
body、html、*[role="button"]不会被加前缀 -
@keyframes名、@font-face、CSS 变量（如:root { --color-primary: #007bff; }）全都不受前缀影响 - 内联
style标签或style属性里的声明，沙箱根本不会处理
真正能切断继承链的那行 CSS
主应用必须对子应用容器显式设置：
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
立即学习“前端免费学习笔记（深入）”；
.subapp-container {
all: initial;
font-size: 16px;
line-height: 1.5;
}
否则子应用会继承主应用的 font-size、color、margin 等，哪怕 class 名不冲突，视觉也会“串”。这行 all: initial 是多数人漏掉的关键一环——它不解决 class 冲突，但能拦住最隐蔽的透传污染。
字体图标和 CSS 变量怎么管
它们根本不走 class 前缀或 Shadow DOM 路径，只能靠约定 + 工具链：
- 禁止子应用在
:root中定义通用变量名（如--primary），统一用带命名空间的名（--app-a-primary） - 子应用的
@font-face必须加唯一font-family名（如app-a-icon-font），不能直接叫iconfont - 构建时用
postcss-prefix-selector处理所有规则，但需手动排除@keyframes和@font-face块 - 主应用提供基础变量白名单，子应用通过
props接收，而非读取document.documentElement.style
Shadow DOM 看似彻底，但它要求子应用放弃对 document 的直连操作；样式沙箱看似妥协，却要你亲手补上所有逃逸点。没有银弹，只有权衡清楚哪块风险你愿意担着。
