使用MicroApp搭建前端微服务，子应用antd组件无法正常使用

四季春茶加草莓冻

于 2024-08-05 16:23:28 发布

阅读量264

点赞数 4

文章标签：前端

本文链接：https://blog.csdn.net/m0_46270721/article/details/140929927

版权

最近使用MicroApp框架搭建前端微服务，使用的技术栈是react + antd，主应用和子应用都是这套技术栈。

发现部署到正式环境中，子应用的功能操作（新增、修改、删除）后的message消息弹窗提示有问题，在首次加载及刷新浏览器后都无法显示，得切换到下一个菜单进行操作才可以显示。打开控制台发现全局message样式都被堵塞在一个div中，若不切换则一直递增。查了很多办法都不行，把官网使用的message的示例方法都试过了，依旧不行。。。。

最后我使用普通iframe进行嵌套子应用，发现message可以正常弹出显示，于是发现是microApp应用的样式隔离属性，得设置成 disableScopecss={true} 。所以得在主应用和各个子应用写好相关样式隔离的文件才可以，不然会造成样式污染。

        <micro-app
          name={loadPreffixName}
          url={loadUrl}
          id={loadPreffixName}
          iframe
          destroy
          disableScopecss={true}   //重点是这个属性
          style={{ width: '100%', height: '100%' }}>
         </micro-app>