title: How do I share a MUI 5 theme across multiple Micro front ends using Module Federation
body: <p>I currently have multiple React v17 apps which utilise Module Federation from Webpack 5. I would like for my MUI 5 theme to be shared across all of these micro frontends without having a there own <code>ThemeProvider</code> wrapped around each exposed component. At present, APP 1 (Shell) adds a custom theme into the MUI <code>ThemeProvider</code> and all Micro UI's are lazy loaded as children. The custom theme works for the container components but not for the micro frontend components. I am following a micro frontend architecture with the following configuration:</p>
  <ol>
  <li><strong>APP 1 (Shell)</strong> - Primary role is manage authentication, wrap theme and consume page components from other micro frontends.</li>
  <li><strong>APP 2 (Home Page)</strong> - Expose page component and rely on theme rendering from shell.</li>
  <li><strong>APP 3 (Another page etc..)</strong> - Expose page component and rely on theme rendering from shell.</li>
  </ol>
  <p>...and so forth for all other micro frontends.</p>
  <p><strong>APP 1 - Module federation config:</strong></p>
  <pre><code>const { ModuleFederationPlugin } = require('webpack').container
  const { shared } = require('./shared/shared')
  
  const homePage = 'https://localhost:8084';
  
  var moduleFedConfig = new ModuleFederationPlugin({
      name: 'container',
      filename: 'remoteEntry.js',
      remotes: {
          homePage: `homePage@${homePage}/remoteEntry.js`,
      },
      shared: shared,
  });
  </code></pre>
  <p><strong>APP 2 - Module federation config:</strong></p>
  <pre><code>const { ModuleFederationPlugin } = require('webpack').container;
  const { shared } = require('./shared/shared');
  
  var moduleFedConfig = new ModuleFederationPlugin({
      name: 'homePage',
      filename: 'remoteEntry.js',
      exposes: {
          './HomePage': './src/page/HomePage',
      },
      shared: shared,
  });
  
  module.exports = { moduleFedConfig };
  </code></pre>
  <p><strong>Module federation shared dependencies config for both APP1 &amp; APP2</strong></p>
  <pre><code>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/' : {
          singleton: true,
          requiredVersion: '*',
      },
      '@emotion/styled' : {
          singleton: true,
          requiredVersion: '*',
      },
      '@mui/material' : {
          singleton: true,
          requiredVersion: '*',
      },
  };
  
  module.exports = { shared };
  </code></pre>
  <p><strong>APP 1 (Shell) - Snip of theme provider code:</strong></p>
  <pre><code>   React.useEffect(() =&gt; {
          const newIsLoaded =
              themeData.elementStyles !== null &amp;&amp; themeData.theme !== null
          setIsThemeLoaded(newIsLoaded)
      }, [themeData.elementStyles, themeData.theme])
  
      return !isLoginRedirect &amp;&amp;
          authState?.isAuthenticated &amp;&amp;
          isThemeLoaded &amp;&amp;
          themeData.theme ? (
          &lt;ThemeProvider theme={themeData.theme}&gt;
              &lt;CssBaseline /&gt;
              &lt;AppContainer /&gt; //All micro front end components are rendered within here
          &lt;/ThemeProvider&gt;
      ) : (
          &lt;Loading fadeIn /&gt;
      )
  </code></pre>
  <p>I would expect that because all the MUI modules are being shared as a singleton, all theme data setup in the initial shell would be accessible in the child micro frontend components.</p>
  <p>Just to confirm as well that RTK &amp; RTK Query work perfectly when shared so I suspect I'm missing something when adding a module to be shared for MUI 5 maybe?</p>
  <p>If you need anything further then please don't hesitate to ask.</p>
  <p>Thank you in advance.</p>