banner
NEWS LETTER

微前端样式隔离

Scroll down

微前端样式隔离

出现的问题

在使用dialog、drawer以及各种append到body的组件时,会出现样式隔离逃逸问题。

解决方案

自己写插件,拦截UI库的插入行为,并判断调用栈(来自子应用还是主应用),进行放行或拦截操作

插件已上传至NPM
qgb-warp-appendbody

使用方法:

子应用main.ts中

1
2
3
4
5
6
7
8
9
import { setCssNameSpace } from "qgb-warp-appendbody";

/**
* @description:设置命名空间,放行非命名空间的appendbody
* @param {string}:子应用的命名空间
* @param {string}:子应用的项目名称(用于取调用栈信息)
* @return {*}
*/
setCssNameSpace("app_form", "qgb-pc-form");

这是图片

其他文章
目录导航 置顶
  1. 1. 微前端样式隔离
    1. 1.1. 出现的问题
    2. 1.2. 解决方案
    3. 1.3. 使用方法: