MUI components lose default styling inside an Iframe

[ghost]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

MUI components don't have default styling inside an iframe.

Expected behavior 🤔

MUI components look the same inside an iframe as they look outside an iframe

Steps to reproduce 🕹

codesandbox

Context 🔦

I am trying to utilize mui components inside and iframe using a React portal to achieve DOM isolation from the rest of the application.

Your environment 🌎

System: OS: Linux 5.11 Ubuntu 20.04.3 LTS (Focal Fossa) Binaries: Node: 16.13.1 - /usr/bin/node Yarn: 1.22.15 - /usr/bin/yarn npm: 8.3.0 - /usr/bin/npm Browsers: Chrome: 96.0.4664.110 Firefox: 95.0.1 npmPackages: @emotion/react: ^11.7.1 => 11.7.1 @emotion/styled: ^11.6.0 => 11.6.0 @mui/base: 5.0.0-alpha.60 @mui/material: ^5.2.4 => 5.2.4 @mui/private-theming: 5.2.3 @mui/styled-engine: 5.2.4 @mui/system: 5.2.4 @mui/types: 7.1.0 @mui/utils: 5.2.3 @types/react: 17.0.37 => 17.0.37 react: 17.0.2 => 17.0.2 react-dom: 17.0.2 => 17.0.2 typescript: ^4.5.2 => 4.5.2

[siriwatknp]

Currently, I believe that MUI does not provide out-of-the-box support for iframe. I think it is worth having a section explaining how to use MUI inside an iframe.

[ghost]

I would really appreciate it if you could point me to anything that helps me in getting MUI v5 working inside iframes or shadow DOM in the meanwhile.

[siriwatknp]

@krishna-vivek-kolasani-zebu You can take a look at our docs implementation. https://github.com/mui-org/material-ui/blob/f80abbb5f942064c9c270b2ac5bb2a2318876754/docs/src/modules/components/DemoSandboxed.js?_pjax=%23js-repo-pjax-container%2C%20div%5Bitemtype%3D%22http%3A%2F%2Fschema.org%2FSoftwareSourceCode%22%5D%20main%2C%20%5Bdata-pjax-container%5D#L18

Note: neglect the jss if you are using MUI v5

[davidwwu]

Note: neglect the jss if you are using MUI v5

Do you mean in the DemoSandboxed component we can omit the StylesProvider and ThemeProvider? How about the StyleSheetManager and CacheProvider in the FramedDemo component? Are those and the React.memo combined to make it "replay" the missed load event?

Thank you very much in advance. I'm looking everywhere for this and couldn't find any precise answer/documentation on how to use MUI v5 with iframe

[andrew-tacklit]

Hi, has anyone managed to set up this on v5? I need some guidance on this, please 🙏

[erickjth]

Hey, I got this working using the emotion cacheProvider. Like:

import { CacheProvider } from '@emotion/react';
import createCache from '@emotion/cache';

const muiCache = createCache({
    key: 'mui',
    container,
  });

  export function Provider(props: PropsWithChildren) {
    return (
      <CacheProvider value={muiCache}>
        <ThemeProvider theme={theme} {...props} />
      </CacheProvider>
    );
  };

Where container, is the parent node when emotion will inject the styles. In my case, inside a iframe.head

[bartoszmamach]

@erickjth CacheProvider managed to import only certain default styles. Any idea of how to import styles that were provided individually to MuiComponents by classes and classNames through css modules. ?