Multiple instances of Material UI get imported using web components

[gbalatckii]

Multiple instances of Material UI get imported using web components

• 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 😯

1. Two react components are created. Both of them are using material ui button and makeStyles hook to change the background of this button. First one is yellow, the second one is blue.

2. The second component was build productive as a web component (using direflow, but it shouldn't matter) and imported in the first component
3. Second button is placed near the first button. Project started
4. The first button is purple instead of yellow

Expected Behavior 🤔

Yellow button and the blue button near the first one

While loading the page and inspecting it, it is too see, that multiple instances of Material UI were loaded. This also overrides the rules, that were defined in the upper stylesheet.

As we can see the second load from material UI (from component 2) sets .Mui classes on top of makeStyles-button-1
If you delete the second component then the button will be yellow

Your Environment 🌎

`npx @material-ui/envinfo`

  Don't forget to mention which browser you used: **Chrome**
  Output from `npx @material-ui/envinfo` goes here.

  System:
    OS: macOS 10.15.7
  Binaries:
    Node: 14.15.4 - ~/.nvm/versions/node/v14.15.4/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v14.15.4/bin/yarn
    npm: 6.14.10 - ~/.nvm/versions/node/v14.15.4/bin/npm
  Browsers:
    Chrome: 88.0.4324.96
    Edge: Not Found
    Firefox: 84.0.1
    Safari: 13.1.3
  npmPackages:
    @material-ui/core: ^4.11.2 => 4.11.2 
    @material-ui/styles:  4.11.2 
    @material-ui/system:  4.11.2 
    @material-ui/types:  5.1.0 
    @material-ui/utils:  4.11.2 
    @types/react: 16.9.3 => 16.9.3 
    react: 16.13.1 => 16.13.1 
    react-dom: 16.13.1 => 16.13.1 
    typescript: ^3.9.3 => 3.9.7 

[oliviertassinari]

You need to configure JSS to inject the style in each shadow dom. Unless you have a strong use case for use web components, I wouldn't encourage them. I'm closing for #17473.

[gbalatckii]

You need to configure JSS to inject the style in each shadow dom. Unless you have a strong use case for use web components, I wouldn't encourage them. I'm closing for #17473.

But I'm not using shadow dom. You can see it on the last screenshot in Chrome Dev Tools.

[oliviertassinari]

@GeorgeBalat Please provide a reproduction in this case. A live example would be perfect. This codesandbox.io template may be a good starting point. Thank you!