ClientStyleContext.tsx

import * as React from "react";
import { CacheProvider } from "@emotion/react";
import createCache from "@emotion/cache";

export interface ClientStyleContextData {
  reset: () => void;
}

interface ClientCacheProviderProps {
  children: React.ReactNode;
}

export const ClientStyleContext = React.createContext<ClientStyleContextData>({
  // eslint-disable-next-line @typescript-eslint/no-empty-function
  reset: () => {},
});

const createEmotionCache = () => {
  return createCache({ key: "css" });
};

export const ClientStyleCacheProvider = ({
  children,
}: ClientCacheProviderProps) => {
  const [cache, setCache] = React.useState(createEmotionCache());

  const clientStyleContextValue = React.useMemo(
    () => ({
      reset() {
        setCache(createEmotionCache());
      },
    }),
    [],
  );

  return (
    <ClientStyleContext.Provider value={clientStyleContextValue}>
      <CacheProvider value={cache}>{children}</CacheProvider>
    </ClientStyleContext.Provider>
  );
};