qiankun icon indicating copy to clipboard operation
qiankun copied to clipboard

Published 20 hours ago • verified publisher icon umijs

[Feature Request] 关于样式隔离

Open a15218378694 opened this issue 3 years ago • 26 comments

Background

主应用是element-ui, 子应用是element-plus, 现在部分子应用的样式, 覆盖掉了主应用的样式

Proposal

希望子应用样式, 不要对主应用生效, 官方提了个antd的方案,

Additional context

但是element-ui全系不支持增加类名前缀

a15218378694 avatar Feb 13 '22 01:02 a15218378694

有个实验属性，https://qiankun.umijs.org/zh/api#startopts 开启sandbox.experimentalStyleIsolation

Jam1zhu avatar Feb 17 '22 02:02 Jam1zhu

有个实验属性，https://qiankun.umijs.org/zh/api#startopts 开启sandbox.experimentalStyleIsolation

之前加过这个了, 会引发新问题, 因为element有些组件弹窗, 下拉框, 是放到body下面的

a15218378694 avatar Feb 17 '22 02:02 a15218378694

遇到了同样的问题

will961123 avatar Feb 18 '22 08:02 will961123

遇到了同样的问题，求官方解答

Glittergalaxy avatar Mar 01 '22 08:03 Glittergalaxy

the same question

GpingFeng avatar Mar 16 '22 02:03 GpingFeng

遇到同样问题@官方

xyy547491937 avatar Mar 22 '22 04:03 xyy547491937

+1

yuwangi avatar Mar 24 '22 10:03 yuwangi

+1

zhangdi994 avatar Mar 28 '22 08:03 zhangdi994

+1 临时通过postcss的命名空间插件解决，大致原理就是添加了一个命名空间，至于element写在body上的样式添加了ignore配置 （ps：不是完美方案，只能保证基本可用）

humorHan avatar Mar 28 '22 08:03 humorHan

+1 临时通过postcs的命名空间解决方案，大致原理就是添加一个自定义空间，至于元素写在上的样式添加了保证配置 （ps：不是完美，基本可以）

我还是不太明白，能说的明白一点吗，谢谢

zhangdi994 avatar Mar 28 '22 08:03 zhangdi994

+1 临时通过postcss的命名空间解决方案，大致原理就是添加一个自定义空间，至于元素写在上的样式添加了保证配置 （ps：不是完美，基本可以）

我还是不太明白，能说的明白一点吗，谢谢

样式冲突原因：是因为主子应用的elment使用了相同的类名 但是属性不一样对吧 思路：添加命名空间 方案：postcss-plugin-namespace插件对主应用的element的css添加命名空间，目的是主应用css只对主应用节点生效，那么问题就解决了对吧 方案隐患：不能解决element在body上添加的样式，不过目前看问题不大，可以作为官方解决前的临时方案

humorHan avatar Mar 29 '22 07:03 humorHan

+1 遇到同样的问题

als24 avatar May 06 '22 07:05 als24

使用命名空间命名之后，要怎么处理在body下面的样式呢

zhangdi994 avatar May 18 '22 05:05 zhangdi994

升级element-plus版本到2.2.2以上，用namespace来控制element-plus的class名称

ac51300696 avatar May 31 '22 03:05 ac51300696

不要使用隔离的方案去处理，太多限制了，甚至fork一个element-ui的仓库，手动改里面所有的class前缀都可以

ac51300696 avatar May 31 '22 03:05 ac51300696

这个方案之前要改源码，请问现在还需要吗？

---原始邮件--- 发件人: @.> 发送时间: 2022年5月31日(周二) 中午11:48 收件人: @.>; 抄送: @.@.>; 主题: Re: [umijs/qiankun] [Feature Request] 关于样式隔离 (Issue #1963)

升级element-plus版本到2.2.2以上，用namespace来控制element-plus的class名称

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: @.***>

a15218378694 avatar May 31 '22 03:05 a15218378694

我也是遇到了这个问题

wuweiyuan avatar Jul 11 '22 07:07 wuweiyuan

可以在编译时或运行时给三方库加个命名空间，对于逃逸到body节点下组件可以改造三方库源码（逃逸到命名空间下而不是到body节点下，这类组件没那么多，组件库升级也不那么频繁）

ghost avatar Jul 19 '22 07:07 ghost

https://element-plus.org/zh-CN/guide/namespace.html 组件库方案，从根本上解决了问题

humorHan avatar Jul 20 '22 02:07 humorHan

使用命名空间命名之后，要怎么处理在body下面的样式呢

逃逸到body下的组件，组件在创建dom时外部添加一层容器，容器className 为命名空间。

fullstackren avatar Aug 04 '22 15:08 fullstackren

也遇到了同样的问题。

Bluewu129 avatar Nov 16 '22 02:11 Bluewu129

三种解决方案：

  1. excludeAssetFilter css逃逸 缺点会影响到主应用样式
  2. 修改子应用的appendtobody，让它插入到子应用的根节点而非body下
  3. 现在主流的组件库对于弹窗也基本提供了更改挂载容器的方法。比如antd modal getContainer

0undefined0 avatar Feb 01 '23 07:02 0undefined0

三种解决方案：

  1. excludeAssetFilter css逃逸缺失点会影响到主要应用样式
  2. 修改子应用的appendtobody，让它插入到子应用的根节点而不是body下
  3. 现在主流的组库对弹窗也基础提供了更修改挂载容器的方法。比如antd modal getContainer

请问方案2怎么实现，直接修改 document.body.appendChild = xxx 时会影响主应用上的这个方式

will961123 avatar May 15 '23 03:05 will961123

升级element-plus版本到2.2.2以上，用namespace来控制element-plus的class名称

qdleader avatar Nov 23 '23 06:11 qdleader

instance = createApp(App) instance.use(ElementPlus, { locale: zhCn, namespace: "myName" })

qdleader avatar Nov 23 '23 06:11 qdleader