CSS Grid 无法通过 strictStyleIsolation 自动隔离，因其 grid-template-*、grid-area 等属性不参与选择器权重计算，同名类会静默覆盖，必须构建时用 PostCSS 重写选择器并运行时兜底拦截。
微前端中 CSS Grid 样式无法靠 strictStyleIsolation 自动隔离——Grid 容器类名一旦冲突（如 .grid-layout），display: grid 和 grid-template-columns 就会互相覆盖，且 Grid 依赖的 grid-area、grid-column 等属性不参与选择器权重计算，污染是静默发生的。
为什么 CSS Grid 特别容易“无声污染”
CSS Grid 的样式生效逻辑和普通布局不同：它不靠 class 权重决胜负，而是靠最后解析的 grid-template-areas 或 grid-template-columns 直接覆盖容器行为。哪怕子应用只定义了一个 .dashboard-grid { display: grid; grid-template-areas: "header main"; }，只要主应用或另一个子应用也用了同名类并设置了 grid-template-areas: "sidebar main"，整个布局就崩了。
- Grid 属性（
grid-template-*, grid-area, grid-row, grid-column）本身不带作用域，浏览器照单全收 -
grid-area值是字符串字面量，无法被 CSS Modules 或 scoped 自动哈希化 - 第三方 UI 库（如 Arco、Ant Design）内部 Grid 布局若未加前缀，会直接写死在全局样式里
- 主应用用
@supports (display: grid)做降级时，其 fallback 规则可能意外匹配子应用容器
必须在构建时重写所有 Grid 相关选择器
不能等运行时劫持，必须让 Grid 类名从源头唯一。PostCSS 是最稳妥路径，重点拦截四类规则：
- 所有含
display: grid、display: inline-grid的声明块 - 所有含
grid-template-*、grid-area、grid-row、grid-column的声明块 - 所有使用
grid-area字符串值的选择器（如[grid-area="header"]） - 所有以
grid-开头的自定义类名（如.grid-main、.grid-sidebar）
推荐插件：postcss-prefix-selector 配合白名单：
立即学习“前端免费学习笔记（深入）”；
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
module.exports = {
plugins: [
require('postcss-prefix-selector')({
prefix: '.subapp-order-',
selectors: [
'[display="grid"]',
'[display="inline-grid"]',
'[grid-template-areas]',
'[grid-template-columns]',
'[grid-area]',
/^\.grid-/,
/^\.layout-/
]
})
]
}
注意：selectors 必须显式列出，不能只靠正则——否则会漏掉 div.grid 这种复合选择器。
运行时补漏：拦截动态生成的 Grid 样式
子应用若用 JS 动态设置 element.style.display = 'grid' 或 element.style.gridTemplateAreas = '"header main"'，构建时重写完全无效。此时需在子应用挂载后立即执行兜底：
- 重写
HTMLElement.prototype.style的 setter，对display、gridTemplate*、gridArea等属性做拦截并加前缀 - 遍历
document.styleSheets，对每个CSSRule检查cssText是否含 Grid 关键字，若有则用正则插入前缀（如.grid-container→.subapp-order-grid-container） - 禁用子应用调用
document.createElement('style')后直接textContent注入 Grid 规则，强制走沙箱提供的insertCss钩子
qiankun 用户可在 loadMicroApp 后的 onMount 中注入：
const rewriteGridRules = () => {
const sheets = Array.from(document.styleSheets);
sheets.forEach(sheet => {
try {
const rules = Array.from(sheet.cssRules || []);
rules.forEach(rule => {
if (rule.cssText && /grid-(template|area|row|column)|display\s*:\s*grid/i.test(rule.cssText)) {
const prefixed = rule.cssText.replace(/(\.)([a-zA-Z0-9-]*grid[a-zA-Z0-9-]*)/g, '$1subapp-order-$2');
sheet.deleteRule(0);
sheet.insertRule(prefixed, 0);
}
});
} catch (e) {
// 跨域 stylesheet 会抛错，跳过
}
});
};
UI 库 Grid 布局必须重新编译
Element Plus 的 el-container、Arco 的 a-layout、Ant Design 的 Layout 内部都重度依赖 Grid。它们的源码里 grid-template-areas 是硬编码字符串，不随命名空间配置变化。
- Arco：必须用
@arco-plugins/vite-vue并设置componentPrefix+ 在vars.less中重定义@prefix，否则a-layout渲染出的grid-area值仍是"header"而非"finance-arco-header" - Ant Design：没有原生命名空间支持，需 fork
components/layout/layout.tsx，将所有grid-area字符串拼接前缀，并用css-loader的modules.localIdentName重写类名 - 自研 Grid 组件：所有
grid-area值必须通过 props 传入，禁止写死；容器类名启用 CSS Modules，且localIdentName包含子应用 ID
最容易被忽略的是：Grid 容器的父元素若用了 display: contents 或 display: flow-root，会破坏 Grid 作用域边界——这类样式必须同步加前缀，否则 Grid 规则仍会泄漏到外部布局流中。
