micro-app
micro-app copied to clipboard
子应用使用v-if切换组件,组件样式丢失
问题描述
第一次打开弹窗,弹窗里面的表单组件样式正常,关闭弹窗重新打开,发现里面的表单组件样式丢失。
问题定位
第一次打开弹窗,发现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的样式)
复现步骤
- 点击Open Modal按钮,打开弹窗
- 关闭弹窗
- 重新点击Open Modal按钮,打开弹窗,发现input框等样式丢失
上传截图
第一次打开弹窗
第二次打开弹窗
复现仓库
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"