import React from 'react'; import { useIsomorphicLayoutEffect } from 'usehooks-ts'; type Props = { children: JSX.Element, className: string, bgImageNode?: React.ReactNode, } export const ThemeInjector = ({ children, className: themeClassName, bgImageNode }: Props): JSX.Element => { const className = `${children.props.className ?? ''} ${themeClassName}`; // add class name to useIsomorphicLayoutEffect(() => { document.body.classList.add(themeClassName); // clean up return () => { document.body.classList.remove(themeClassName); }; }); return React.cloneElement(children, { className }, [

{bgImageNode}

, children.props.children, ]); };