reactjs - Material ui 样式的单个 spa 集成问题

Question

我们正在尝试将 Single spa 与 React 和 Material UI 集成。 我们有 2 个带有 Material UI 的 React 应用程序:

1. 根容器。
2. 微前端(水疗应用)。

当我们整合这两个组件时，我们会遇到以下错误:

看起来有几个 @material-ui/styles 实例在此应用程序中初始化。这可能会导致主题传播问题、损坏的类名、特异性问题，并无缘无故地使您的应用程序变大。参见 https://material-ui.com/r/styles-instance-warning了解更多信息。

配置文件是这样的:

webpack.config。使用此配置，我们希望将其外部化，以便它使用根容器应用程序中存在的 Material ui 依赖项。

index.js。我们正在注册微前端。

index.html 我们正在使用 systemjs 加载 Material 模块和微前端。

我们按照本页中建议的步骤进行操作，但没有得到任何满意的结果:

https://material-ui.com/getting-started/faq/#i-have-several-instances-of-styles-on-the-page

Answer 1

我也一直在为 Single Spa 微前端中的 Material UI 苦苦挣扎，因为我对 material-ui 也有多个依赖项，这导致了随机渲染错误。

为了防止这种情况发生，您需要使用 material-ui 作为浏览器内模块，因此您只有一个副本供您的微前端使用。为此，它需要与 SystemJS 兼容。更多信息:https://single-spa.js.org/docs/recommended-setup/#systemjs

为此，最简单的方法是使用 UMD 脚本。例如，如果您使用的是@material-ui/core 版本 4.11.3，您将需要此脚本:

"https://cdn.jsdelivr.net/npm/@material-ui/core@4.11.3/umd/material-ui.production.min.js"

您将不得不将该脚本与其余的导入 map 一起加载:

例如:

    <script type="systemjs-importmap">
      {
        "imports": {
          "react": "https://cdn.jsdelivr.net/npm/react@17.0.1/umd/react.production.min.js",
          "react-dom": "https://cdn.jsdelivr.net/npm/react-dom@17.0.1/umd/react-dom.production.min.js",
          "single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.8.2/lib/system/single-spa.min.js",
          "rxjs": "https://cdn.jsdelivr.net/npm/@esm-bundle/rxjs@6.6.6/system/es2015/rxjs.min.js",
          "@material-ui/core": "https://cdn.jsdelivr.net/npm/@material-ui/core@4.11.3/umd/material-ui.production.min.js"
        }
      }
    </script>

另一种可能性是使用 JSPM 将您的依赖项加载为导入映射。你可以在这里找到一个例子:https://github.com/jspm/project/issues/99

最后，您始终可以将您的依赖项打包到您的一个共享组件中并从那里共享它。由于您的共享组件是浏览器内模块，因此您将只有一个副本。

希望有用