做搜狗pc网站优化快速代加工厂找订单的网站
在最近微前端子应用的「xxx 弹窗」需求中，遇到一个样式覆盖问题：
弹窗在子应用单独运行时表现正常，但嵌入主应用后样式错乱。
原本样式：
嵌入后样式：
现象
F12 发现：
弹窗 DOM 仍被追加到
<body>（qiankun 默认行为）；所有 class 被自动加上子应用前缀，导致权重降低；
主应用后加载的 Element-UI 样式把子应用的
v-deep+!important覆盖。
解决思路
隔离挂载点：
不再让 Dialog 默认挂到<body>，而是插入到子应用自身的容器内，从根源上避免主应用样式干扰。官方属性：
Element-UI<el-dialog>提供append-to-body/modal-append-to-body，正好能满足“指定挂载容器”的需求。dialog代码中添加以下内容：
<el-dialogtitle="xxx":visible.sync="visible"
+ :append-to-body="false"
+ :modal-append-to-body="false"width="30%">…内容…
</el-dialog>:append-to-body="false"
把 Dialog DOM 插到当前父节点（子应用根节点）而非<body>。:modal-append-to-body="false"
同时让遮罩层也留在同一容器，确保层级关系不混乱。
结果
样式恢复，主/子应用样式完全隔离，无需再写更高权重的覆盖代码。