import React, { CSSProperties } from 'react'; import Frame, { FrameContextConsumer } from 'react-frame-component'; import createCache from '@emotion/cache'; import { CacheProvider } from '@emotion/core'; import baseStyles from './styles/reset'; type CssInjectorType = { document: any; children: any; window: any; }; class CssInjector extends React.Component { cache: any; constructor(props) { super(props); // const iframe = document.getElementsByTagName('iframe')[0] // const iframe = document.getElementsByTagName('iframe')[0] // const iframeHead = iframe.contentDocument.head const iframeHead = this.props.document.head; this.cache = createCache({ container: iframeHead }); } render() { return ( {React.cloneElement(this.props.children, { document: this.props.document, window: this.props.window, })} {/* this.props.children */} ); } } const initialFrameContent = `

`; const mountTarget = '#mountHere'; type StyledFrame = { className?: string; style?: CSSProperties; children: React.ReactChild; id?: any; }; const StyledFrame = ({ className, style, children, id, ...props }: StyledFrame) => ( { // Callback is invoked with iframe's window and document instances ({ document, window }) => { // Render Children return ( {children} ); } } ); export default StyledFrame; /* export default class StyledFrame extends React.Component { render(){ return { // Callback is invoked with iframe's window and document instances ({document, window}) => { // Render Children return {this.props.children} } } } } */