reactjs - Single-SPA 的 Material UI 样式问题

问问题 2021-08-13T06:03:25.223

154 次

我正在使用单个 spa 来创建我的反应微前端，在其中一个 MFE（微前端）中我需要从另一个 MFE 动态导入“.js”并渲染组件，因为我正在使用 systemjs 导入

下面是一个示例代码，说明子组件如何在主文件中公开一个导出 js 文件的函数

export function getcode() {
  return import("./views/rk.js");
}

在父组件中，我使用 react.lazy 从函数中导入 js 文件并渲染为组件

const Test = React.lazy(() =>
  import("@Test/react-singlespa").then((mod) => mod.getcode())
);

并使用以下方式渲染上述 const

<React.Suspense fallback="Loading ...">
        <Test/>
      </React.Suspense>

在开发模式下运行代码时我没有问题，但在生产模式下，样式在第一次加载时被弄乱了，但随后样式很好。

这个问题似乎与 webpack 的材料 ui 问题导入很常见，但网上的解决方案似乎都没有帮助。我尝试了以下链接中给出的所有可能的解决方案

假设这是必须使用 Single-spa 框架完成的事情......非常感谢这方面的任何帮助

0 回答 0