如何通过Module Federation在多个微前端间共享MUI 5主题

问题根源 #

你遇到的问题是Shell应用的MUI ThemeProvider上下文无法传递给微前端组件，尽管配置了MUI依赖的单例共享。核心原因是MUI相关依赖的共享配置不完整，导致子应用加载了独立的MUI实例，无法共享Shell的主题上下文。

修复方案 #

1. 补全MUI共享依赖 #

你的共享配置遗漏了MUI 5的核心依赖，同时存在路径匹配错误，修改后的shared配置如下：

const deps = require('../../../package.json').dependencies;

var shared = {
    react: {
        singleton: true,
        requiredVersion: '*',
    },
    'react-dom': {
        singleton: true,
        requiredVersion: '*',
    },
    'react-router-dom': {
        singleton: true,
        requiredVersion: '*',
    },
    '@okta/okta-auth-js': {
        singleton: true,
        requiredVersion: 'auto',
    },
    '@okta/okta-react': {
        singleton: true,
        requiredVersion: 'auto',
    },
    '@reduxjs/toolkit': {
        singleton: true,
        requiredVersion: deps['@reduxjs/toolkit'],
    },
    'react-redux': {
        singleton: true,
        requiredVersion: deps['react-redux'],
    },
    '@emotion/react': { // 移除末尾多余斜杠，避免webpack匹配失败
        singleton: true,
        requiredVersion: '*',
    },
    '@emotion/styled': {
        singleton: true,
        requiredVersion: '*',
    },
    '@emotion/cache': { // 新增：MUI样式渲染依赖的核心缓存层
        singleton: true,
        requiredVersion: '*',
    },
    '@mui/material': {
        singleton: true,
        requiredVersion: '*',
    },
    '@mui/system': { // 新增：MUI主题系统的核心依赖
        singleton: true,
        requiredVersion: '*',
    },
};

module.exports = { shared };

2. 验证单例共享有效性 #

在Shell和子应用中分别打印MUI核心模块的引用，确认是否为同一个实例：

// Shell应用内
console.log('Shell ThemeProvider:', require('@mui/material').ThemeProvider);

// 子应用HomePage组件内
console.log('Remote ThemeProvider:', require('@mui/material').ThemeProvider);

若两个输出的引用地址一致，说明单例共享生效；若不一致，检查子应用package.json的MUI版本是否与Shell兼容，或确认webpack配置是否正确引入了共享配置。

3. 移除子应用的ThemeProvider包裹 #

确保子应用暴露的组件（如HomePage）未自行包裹ThemeProvider，否则会覆盖Shell的主题上下文。

4. 清理缓存并重启服务 #

修改webpack配置后，清理所有应用的node_modules缓存、webpack构建缓存，重启所有服务，确保新配置生效。

原理说明 #

MUI的ThemeProvider基于React上下文实现，只有当所有微前端使用同一个MUI实例时，上下文才能在Shell与子应用间传递。若子应用加载了独立的MUI实例，其上下文与Shell完全隔离，自然无法获取自定义主题。

内容的提问来源于stack exchange，提问作者Kitson88