|
@@ -1,6 +1,8 @@
|
|
|
|
|
|
|
|
import React from 'react';
|
|
import React from 'react';
|
|
|
|
|
|
|
|
|
|
+import { useIsomorphicLayoutEffect } from 'usehooks-ts';
|
|
|
|
|
+
|
|
|
type Props = {
|
|
type Props = {
|
|
|
children: JSX.Element,
|
|
children: JSX.Element,
|
|
|
className: string,
|
|
className: string,
|
|
@@ -9,6 +11,17 @@ type Props = {
|
|
|
|
|
|
|
|
export const ThemeInjector = ({ children, className: themeClassName, bgImageNode }: Props): JSX.Element => {
|
|
export const ThemeInjector = ({ children, className: themeClassName, bgImageNode }: Props): JSX.Element => {
|
|
|
const className = `${children.props.className ?? ''} ${themeClassName}`;
|
|
const className = `${children.props.className ?? ''} ${themeClassName}`;
|
|
|
|
|
+
|
|
|
|
|
+ // add class name to <body>
|
|
|
|
|
+ useIsomorphicLayoutEffect(() => {
|
|
|
|
|
+ document.body.classList.add(themeClassName);
|
|
|
|
|
+
|
|
|
|
|
+ // clean up
|
|
|
|
|
+ return () => {
|
|
|
|
|
+ document.body.classList.remove(themeClassName);
|
|
|
|
|
+ };
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
return React.cloneElement(children, { className }, [
|
|
return React.cloneElement(children, { className }, [
|
|
|
<div key="grw-bg-image-wrapper" className="grw-bg-image-wrapper">{bgImageNode}</div>,
|
|
<div key="grw-bg-image-wrapper" className="grw-bg-image-wrapper">{bgImageNode}</div>,
|
|
|
children.props.children,
|
|
children.props.children,
|
Yuki Takei