Nested theme providers not working correctly when used with webpack module federation

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Two ThemeProviders are nested. One is the outer and spans the whole Application tree, setting primary color to green the other one is nested into it, setting primary color to hotpink. I also have two buttons - one inside the outer ThemeProvider, sibling to the inner ThemeProvider, the other inside the inner ThemeProvider.

A little like this:

<ThemeProvider theme={/* green primary */}>
  <Button color="primary">should always be green</Button>
  <ThemeProvider theme={/* hotpink primary */}>
    <Button color="primary">should always be hotpink</Button>
  </ThemeProvider>
</ThemeProvider>

However, the inner ThemeProvider is asynchronously loaded, using webpack module federation (not sure if this even matters, it’s a rather basic React.lazy think, lazy loading a webpack chunk). However, it is coming from a different application - so there might be something about “seed” that i don’t get here.

What happens ins that as long as only the outer ThemeProvider is rendered, the Button that should be green is green. Once the inner ThemeProvider is loaded and rendered aswell, the outer Button switches to hotpink and thus has the same color as the inner Button - which it shouldn’t.

Expected Behavior 🤔

Outer Button stays green.

Steps to Reproduce 🕹

Not easily reproducible on codesandbox due to module federation.

This is the commit with the reproduction: https://github.com/codepunkt/react-microfrontend-eval/commit/b5e9284cadc9bf964442c0ed191530edc4dcca6c

Steps:

1. Clone
2. Switch to commit
3. Run “yarn” in toplevel folder
4. Change directory to “federation” folder
5. Run “yarn start” in federation folder
6. See problem in effect on localhost:3000

Your Environment 🌎

Tech	Version
Material-UI	v4.11.0
React	v16.13.1
Browser	Any
TypeScript	v3.9.6, should not be related

[codepunkt]

@AlessandroAnnini I had to tread @material-ui/styles as a singleton

[vishalrajole]

Okay, so if I understood it correctly, we don’t need to make @material-ui/core singleton as it is partially singleton? but rest like below needs to be singleton? @oliviertassinari

  '@material-ui/styles': {
          singleton: true,
        },
        '@emotion/core': {
          singleton: true,
        },
        '@emotion/styled': {
          singleton: true,
        },