micro-app icon indicating copy to clipboard operation
micro-app copied to clipboard

子应用使用v-if切换组件,组件样式丢失

Open SupremeZJw opened this issue 7 months ago • 2 comments

问题描述

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

问题定位

第一次打开弹窗,发现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

环境信息

  • micro-app版本:"1.0.0-rc.5"
  • 主应用前端框架&版本:"vue": "^3.4.29"
  • 子应用前端框架&版本:"vue": "^3.4.29"
  • 构建工具&版本:基座和子应用都是使用的"vite": "^5.3.1"

SupremeZJw avatar Jul 12 '24 01:07 SupremeZJw