Stephen Haney

React Styled Components in IFrames

How can you use Styled Components inside an IFrame? It took some research, but I found an elegant solution using styled-components and react-frame-component.

Happily, styled-components includes a StyleSheetManager component that can take a target prop. The target expects a DOM node, and it will attach its dynamically created stylesheets to that node.

react-frame-component uses React’s new version of its Context API to expose a FrameContextProvider. It includes the IFrame document and window in the context.

You can combine these two APIs as follows to use styled-components inside your IFrames:

<Frame>
  <FrameContextConsumer>
    {
      frameContext => (
        <StyleSheetManager target={frameContext.document.head}>
          <React.Fragment>
            {/* your children here */}
          </React.Fragment>
        </StyleSheetManager>
      )
    }
  </FrameContextConsumer>
</Frame>

This works perfectly with react v16.4.1, styled-components v3.3.3, and react-frame-component v4.0.0.