Emotion custom style insertion point is not applied when using material-ui from CDN link

I have a container page that links to material-ui CDN as well as react and react-dom, and a webcomponent with a shadow-dom, then I set the emotion style insertion point to inside this shadow-dom. The styles are applied only if I use material-ui as a npm dependency.

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

The emotion styles are not applied inside the shadow dom: https://codesandbox.io/s/emotion-material-ui-cdn-issue-4cr5g when using material-ui via CDN.

Expected Behavior 🤔

To have emotions styles applied as I have here: https://codesandbox.io/s/emotion-material-ui-without-cdn-idlyp (when not using material-ui from the CDN link)

Steps to Reproduce 🕹

Ps. I haven’t used the official codesandbox because I wanted to configure webpack in the create-react-app

Steps:

1. Go to this codesandbox and check (browser inspector) that emotion styles are applied in the head tag. (In this container material is linked via cdn aliased using craco)
2. Compare the result with this codesandbox using material-ui as a NPM dependency, emotion styles are correctly applied inside the shadow-dom

Context 🔦

Though in material-ui documentation the CDN usage is not recommended, I’m defining a microfrontend via runtime integration with web-component architecture, and I don’t want to ship material-ui inside all web-components, but instead have it defined in the container page with the web-components referencing it.

Ps. The material-ui CDN will likely to be incorporated in my company infrastructure and likely be removed the components that we do not use.

Your Environment 🌎

• create-react-app
• craco
• yarn

[michaldudak]

@mnajdova would you mind taking a look at it?

[aeldo-bw]

hey @mnajdova thanks a lot for the feedback! In fact there were a double link to material-ui, though it’s an issue, it’d basically set again the content in the global MaterialUI variable. Not really connected to the problem. (I’ve updated the sandbox and still getting the same problem 😦 )

In your exemple, to see the issue you need to create a web-component with a shadow-dom, and then try to insert the emotion styles inside this shadow-dom. (In this case the styles keeps being added in the header instead instead of the instructed place)

const cache = createCache({
      key: "re",
      prepend: true,
      container: emotionRoot // <-- it should be inserted here
    });

I am not sure why this means that it should be fetched via CDN. You can have it as a dependency in the container, together with emotion and provide whatever you need to the web components.

The need from the CDN comes from the strategy adopted that we don’t want to run a build in the container application to have these common dependencies updated 😊

@vanderleisilva In the code sandbox you linked (link), the MUI styles are not being applied correctly. You can see that a default button is shown instead of a MUI one. Is this supposed to happen? I’m trying this same approach and am not able to get it working either.