时间戳

首页 > 解决方案 > Single SPA 中的 Material UI 主题冲突

reactjs - Single SPA 中的 Material UI 主题冲突

问题描述

我正在尝试在单个 spa 中加载两个 React 微前端应用程序。但我在主题方面面临风格冲突。

index.ejs 中的 systemjs-import 映射

<script type="systemjs-importmap">
{
  "imports": {
    "single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.9.0/lib/system/single-spa.min.js",
    "react": "https://cdn.jsdelivr.net/npm/react@16.13.1/umd/react.production.min.js",
    "react-dom": "https://cdn.jsdelivr.net/npm/react-dom@16.13.1/umd/react-dom.production.min.js",
    "@nviera/sos-react-header": "//localhost:8080/...sos-react-header.js",
    "@nviera/sos": "//localhost:8081/...sos.js"
  }
}
</script>

使用 index.ejs 中的模板

<template id="single-spa-layout">
  <single-spa-router>
    <nav class="topnav">
      <application name="...sos-react-header"></application>
    </nav>
    <div class="main-content mt-16">
      <route path="/">
        <application name="sos"></application>
      </route>
    </div>
  </single-spa-router>
</template>

根-config.js

const routes = constructRoutes(document.querySelector('#single-spa-layout'));
const applications = constructApplications({
  routes,
  loadApp({ name }) {
    return System.import(name);
  },
});
const layoutEngine = constructLayoutEngine({
  routes,
  applications,
  active: false,
});
applications.forEach(registerApplication);
layoutEngine.activate();
start();

标头应用

在此处输入图像描述

主要应用

在此处输入图像描述

我在这里面临的问题是，我在包含 Paper 的标题中使用了 AppBar，并在主题中定义了自定义背景颜色。此背景颜色被另一个微前端（即“内容微前端”）覆盖

我们如何为单独的微前端分别封装主题并避免这种冲突？

标签： reactjsmaterial-uisingle-spa

解决方案

微前端之间的样式共享/覆盖是一个主要话题。您可以在这个单空间 css 文档中找到详细的概述。

简而言之，理想情况下，您需要在styleguide 实用程序模块中定义您的主题，或者将其作为root config 中的 props传递给微前端。

推荐阅读