Untitled

"@material-ui/core": "^4.0.0",
"@material-ui/styles": "^4.0.0",
"jss": "^10.0.0-alpha.16",
"react-jss": "^10.0.0-alpha.16",

import React from 'react';
import { create } from 'jss';
import Frame, { FrameContextConsumer } from 'react-frame-component';
import { JssProvider } from 'react-jss';

import { createGenerateClassName, jssPreset } from '@material-ui/styles';
import { MuiThemeProvider } from '@material-ui/core/styles';

import theme from '../Theme/MaterialUITheme.jsx';
import App from './App.jsx';

class ContentFrame extends React.Component {
    render() {
        return (
            <Frame
                initialContent='<!DOCTYPE html><html style="height: 100%;"><head><style>.frame-content { height: 100%; }</style></head><body style="margin: 0; padding: 0; height: 100%;"><div class="jss-insert"></div><div class="mainEntry" style="height: 100%;"></div></body></html>'
                mountTarget=".mainEntry"
                className="my-iframe"
            >
                <FrameContextConsumer>
                    {({ document, window }) => {
                        const jss = create({
                            plugins: [...jssPreset().plugins],
                            insertionPoint: document.querySelector('.jss-insert'),
                        });

                        const generateClassName = createGenerateClassName();

                        return (
                            <JssProvider jss={jss} generateClassName={generateClassName}>
                                <MuiThemeProvider theme={theme}>
                                    <App document={document} window={window} />
                                </MuiThemeProvider>
                            </JssProvider>
                        );
                    }}
                </FrameContextConsumer>
            </Frame>
        );
    }
}

export default ContentFrame;