微前端中CSS-in-JS样式失效源于注入时机与沙箱生命周期错位，需用运行时方案（如styled-components/emotion）配合StyleSheetManager和Shadow DOM兼容写法（如CSSStyleSheet），并透传theme避免Context隔离。
微前端中CSS-in-JS样式注入失败的典型现象
子应用加载后，styled-components生成的样式没生效，或只在主应用首次渲染时出现、刷新后丢失；wujie子应用里el-tooltip类名存在但无样式；Vue3子应用中scoped样式被主应用全局规则覆盖。这些不是“样式写错了”，而是CSS-in-JS的注入时机与微前端沙箱生命周期错位导致的。
必须确保子应用使用运行时CSS-in-JS库并启用SSR兼容模式
编译时方案（如Linaria、vanilla-extract）在构建阶段就将样式转为静态CSS文件，无法响应子应用动态挂载/卸载。只有运行时方案（styled-components、emotion）能配合微前端沙箱做样式隔离。关键配置如下：
- 子应用入口需显式调用
StyleSheetManager（emotion）或StyleSheetManager+ServerStyleSheet（styled-components），把样式注入目标容器而非document.head - 禁用
insertCss默认行为，改用container.appendChild(styleEl)指向子应用挂载节点下的<style></style>占位符 - 在
unmount钩子中手动清空该<style></style>节点内容，避免残留
绕过Shadow DOM限制：用constructable stylesheets替代内联<style></style>
某些微前端框架（如qiankun 2.x）默认启用Shadow DOM沙箱，而styled-components的createGlobalStyle和主题Provider依赖document.head，会失效。此时应：
HISUI 前端框架开发指南（IRIS版）
下载
HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。
- 检查浏览器是否支持
CSSStyleSheet构造函数（Chrome 73+、Firefox 69+） - 在子应用
render函数中创建new CSSStyleSheet()，用replaceSync注入CSS文本 - 将该sheet通过
shadowRoot.adoptedStyleSheets = [sheet]挂载——这是唯一能穿透Shadow DOM的样式注入方式 - 注意：React 18的并发渲染可能导致多次
replaceSync调用，需加防抖或比对hash值避免重复
主题切换时子应用样式不响应？检查ThemeProvider作用域边界
主应用传入的theme对象无法穿透到子应用组件树，因为ThemeProvider的Context只在自身React树内有效。解决方案只有两个：
立即学习“前端免费学习笔记（深入）”；
- 子应用自行实现
ThemeConsumer，监听主应用通过window或CustomEvent广播的theme-change事件，再调用setTheme更新本地Provider - 主应用在
loadMicroApp时，把theme作为props透传给子应用根组件，并在子应用内包裹ThemeProvider value={props.theme}
不要试图用styled-components的createGlobalStyle覆盖子应用全局变量——它生成的CSS规则仍受沙箱作用域限制，且无法响应后续主题变更。
