PreviewLayout for Gatsby & Netlify CMS to enable styled-components

PreviewLayout.js

import React, { useRef, useLayoutEffect } from "react";
import { StyleSheetManager } from "styled-components";
import PreviewContext from "./PreviewContext";

const WithPreviewContext = ({ children }) =>	
		<PreviewContext.Provider value={true}>
			<main>
				{children}
			</main>
		</PreviewContext.Provider>;

const PreviewLayout = ({ children }) => {
	const iframeRef = useRef(null);

	useLayoutEffect(() => {
		const iframe = document.querySelector('#nc-root iframe');
		const iframeHeadElem = iframe && iframe.contentDocument.head;
		iframeRef.current = iframeHeadElem;
	});

	return iframeRef && iframeRef.current ?
		<StyleSheetManager target={iframeRef.current}>
			<WithPreviewContext>
				{children}
			</WithPreviewContext>
		</StyleSheetManager> :
		<WithPreviewContext>
			{children}
		</WithPreviewContext>;
};

export default PreviewLayout;