Styled Components with React Frame

Framed.js

import React from "react"; // "react": "^16.8.6",
import Frame, { FrameContextConsumer } from "react-frame-component";  // "react-frame-component": "^4.1.0",
import { StyleSheetManager, withTheme, ThemeProvider } from "styled-components"; // "styled-components": "^3.3.3",

export default withTheme(props => {
  const { theme, style = {}, children, ...rest } = props;
  return (
    <Frame
      style={{
        display: "block",
        overflow: "scroll",
        border: 0,
        ...style
      }}
      {...rest}
    >
      <FrameContextConsumer>
        {frameContext => (
          <StyleSheetManager target={frameContext.document.head}>
            {theme ? (
              <ThemeProvider theme={theme}>{children}</ThemeProvider>
            ) : (
              children
            )}
          </StyleSheetManager>
        )}
      </FrameContextConsumer>
    </Frame>
  );
});