主应用标签样式影响微应用标签样式，如何解决？

Erochica commented 3 years ago

主应用和微应用使用不同的组件库，拥有不同的 reset 样式。例如主应用中 reset.css 中有样式设置： h1 { font-size: 3rem; }

微应用中 reset.css 中有样式设置： h1 { color: #333; }

微应用中所有 h1 标签都会继承主应用的样式，最终微应用中 h1 样式为： { color: #333; font-size: 3rem }

由于不是 class，不能通过前缀来隔离。

请问这种样式问题如何解决？

poorli commented 3 years ago

可以看下文档的 API 和常见问题，有介绍样式隔离方案。 https://qiankun.umijs.org/zh/api https://qiankun.umijs.org/zh/faq

Erochica commented 3 years ago

可以看下文档的 API 和常见问题，有介绍样式隔离方案。 https://qiankun.umijs.org/zh/api https://qiankun.umijs.org/zh/faq

你好，我采用了官方文档的样式隔离方案，对有类名的样式进行了隔离。但是，我这边的问题是：由于微应用被主应用包裹，所以主应用中的 标签样式（如： h1 {}、p {}，不是类名样式 .class {}）都会作用到微应用上。

例如主应用中： h1 { font-size: 3rem; }

微应用中： h1 { color: #333; }

微应用中所有 h1 标签都会继承主应用的样式，最终微应用中 h1 样式为： { color: #333; font-size: 3rem }

由于无法确定微应用可能从主应用继承到什么奇奇怪怪的样式，所以也无法通过覆写来保全微应用样式。请问这种该如何处理？

poorli commented 3 years ago

可以看下文档的 API 和常见问题，有介绍样式隔离方案。 https://qiankun.umijs.org/zh/api https://qiankun.umijs.org/zh/faq

你好，我采用了官方文档的样式隔离方案，对有类名的样式进行了隔离。但是，我这边的问题是：由于微应用被主应用包裹，所以主应用中的 标签样式（如： h1 {}、p {}，不是类名样式 .class {}）都会作用到微应用上。

例如主应用中： h1 { font-size: 3rem; }

微应用中： h1 { color: #333; }

微应用中所有 h1 标签都会继承主应用的样式，最终微应用中 h1 样式为： { color: #333; font-size: 3rem }

由于无法确定微应用可能从主应用继承到什么奇奇怪怪的样式，所以也无法通过覆写来保全微应用样式。请问这种该如何处理？

嗯嗯，你没有用 strictStyleIsolation 模式呢？shawdom dom 的话，应该就不会被影响了。

Erochica commented 3 years ago

可以看下文档的 API 和常见问题，有介绍样式隔离方案。 https://qiankun.umijs.org/zh/api https://qiankun.umijs.org/zh/faq

你好，我采用了官方文档的样式隔离方案，对有类名的样式进行了隔离。但是，我这边的问题是：由于微应用被主应用包裹，所以主应用中的 标签样式（如： h1 {}、p {}，不是类名样式 .class {}）都会作用到微应用上。例如主应用中： h1 { font-size: 3rem; } 微应用中： h1 { color: #333; } 微应用中所有 h1 标签都会继承主应用的样式，最终微应用中 h1 样式为： { color: #333; font-size: 3rem } 由于无法确定微应用可能从主应用继承到什么奇奇怪怪的样式，所以也无法通过覆写来保全微应用样式。请问这种该如何处理？

嗯嗯，你没有用 strictStyleIsolation 模式呢？shawdom dom 的话，应该就不会被影响了。

之前使用的就是 strictStyleIsolation: true 模式，在开启 strictStyleIsolation: true 模式后，确实可以完全隔离样式，但是 antd 组件库会出问题，到处都在报错。所以改为了 experimentalStyleIsolation: true 模式，但是 experimentalStyleIsolation: true 模式不能隔离标签样式。

Erochica commented 3 years ago

可以看下文档的 API 和常见问题，有介绍样式隔离方案。 https://qiankun.umijs.org/zh/api https://qiankun.umijs.org/zh/faq

你好，我采用了官方文档的样式隔离方案，对有类名的样式进行了隔离。但是，我这边的问题是：由于微应用被主应用包裹，所以主应用中的 标签样式（如： h1 {}、p {}，不是类名样式 .class {}）都会作用到微应用上。例如主应用中： h1 { font-size: 3rem; } 微应用中： h1 { color: #333; } 微应用中所有 h1 标签都会继承主应用的样式，最终微应用中 h1 样式为： { color: #333; font-size: 3rem } 由于无法确定微应用可能从主应用继承到什么奇奇怪怪的样式，所以也无法通过覆写来保全微应用样式。请问这种该如何处理？

嗯嗯，你没有用 strictStyleIsolation 模式呢？shawdom dom 的话，应该就不会被影响了。

之前使用的就是 strictStyleIsolation: true 模式，在开启 strictStyleIsolation: true 模式后，确实可以完全隔离样式，但是 antd 组件库会出问题，到处都在报错。所以改为了 experimentalStyleIsolation: true 模式，但是 experimentalStyleIsolation: true 模式不能隔离标签样式。