Using Material UI components inside an Iframe

4
votes

I've been trying to get Material UI components to work inside an Iframe. Material UI has provided a DemoFrame component for this purpose (https://github.com/mui-org/material-ui/blob/master/docs/src/modules/components/DemoFrame.js), but the styles does not get inserted into the Iframe properly. I've created a code sandbox to demonstrate this. Am I missing something here?

https://codesandbox.io/s/rykq8nz4j4

Update:

The demo frame seems to be working correctly in the component demos in material-ui web site. If I look at the source I can see the styles have been injected correctly.

enter image description here

But in my demo the styles does not get injected into the iframe.

enter image description here

1
reactjsmaterial-ui
I'm actually having this exact same issue, I've copied the DemoFrame component they have exactly and my output looks just like yours. I can't figure this out either - Jordan

1 Answers

2
votes

Got it to work after updating the packages to the latest versions and adding the following lines to install the material ui styles.

import { install } from "@material-ui/styles";
install();

Demo: https://codesandbox.io/s/rykq8nz4j4