Issue with createGenerateClassName

[harishmathur]

Steps to reproduce

I am using "@material-ui/core" version "4.10.2"

Link to live example: (required)

Steps:

1. Using Webpack Module Federation, create a Microfrontend with One Host and 2 Child apps

2. Add import as below
   import {StylesProvider,createGenerateClassName} from "@material-ui/core/styles";

3. Add createGenerateClassName definition as below;

// HOST
const generateClassName = createGenerateClassName({
  productionPrefix: "my-host",
  seed: `my-host-seed`,
  disableGlobal: true
});

// Child 1
const generateClassName = createGenerateClassName({
  productionPrefix: "my-child-1",
  seed: `my-child-seed-1`,
  disableGlobal: true
});

// Child 2
const generateClassName = createGenerateClassName({
  productionPrefix: "my-child-2",
  seed: `my-child-seed-2`,
  disableGlobal: true
});

4. Add StylesProvider wrapper in App.js as below (same for Host and 2 Child apps)

<StylesProvider injectFirst generateClassName={generateClassName}>

Current behavior

In the rendered DOM, I can see 'my-host-seed'. But I cannot see any generated class names for the child apps i.e. I cannot see either 'my-child-seed-1' OR 'my-child-seed-2'

Expected behavior

In the rendered DOM, I should be able to see 'my-host-seed' and also the generated class names for the child apps i.e. I should also see 'my-child-seed-1' AND 'my-child-seed-2'

Context

I am trying to resolve CSS conflict issues in my Microfrontend app using StylesProvider

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Chrome

Search keywords: StylesProvider

[brijeshb42]

Can you share a minimal reproducible example? A Github repo is also fine. It'd be a time taking process to setup a project with module federation.

[harishmathur]

Actually it would take me some time to create the minimal reproducible example.

Meanwhile, from what I have highlighted is the relevant code. Not sure if the way I have used StylesProvider and specifically the 'disableGlobal' argument across the Host and Child apps is appropriate.