search

micro-zoe / micro-app

A simple, efficient and powerful micro front-end framework. 一款简约、高效、功能强大的微前端框架
https://micro-zoe.github.io/micro-app/
MIT License
5.53k stars 563 forks source link

子应用使用v-if切换组件，组件样式丢失 #1293

Open SupremeZJw opened 2 months ago

SupremeZJw commented 2 months ago

问题描述

第一次打开弹窗，弹窗里面的表单组件样式正常，关闭弹窗重新打开，发现里面的表单组件样式丢失。

问题定位

第一次打开弹窗，发现micro-app成功的设置了样式隔离：micro-app[name=my-app] :where(.css-dev-only-do-not-override-19iuou).ant-input 第二次打开弹窗，发现样式隔离失效：:where(.css-dev-only-do-not-override-19iuou).ant-input 由于我的子应用全局初始化了样式，在第二次打开弹窗micro-app对初始化的样式做了隔离，但是对antd组件的样式没有隔离，导致初始化的样式覆盖了antd的样式。（micro-app[name=my-app] input的样式覆盖了:where(.css-dev-only-do-not-override-19iuou).ant-input的样式）

复现步骤

  1. 点击Open Modal按钮，打开弹窗
  2. 关闭弹窗
  3. 重新点击Open Modal按钮，打开弹窗，发现input框等样式丢失

上传截图

第一次打开弹窗 image 第二次打开弹窗 image

复现仓库

https://github.com/SupremeZJw/micro-app-bug

环境信息

SupremeZJw commented 1 month ago

@bailicangdu 请问这个问题多久修复呢，或者是一些代码上的调整建议

bailicangdu commented 1 month ago

antd提供给了修改class前缀的方式，可以避免这个问题 https://ant.design/components/config-provider-cn#configproviderconfig