Fix Yoshiki ssr mismatch

This commit is contained in:
Zoe Roux 2023-01-26 22:43:49 +09:00 committed by Zoe Roux
parent bc878a2e90
commit 91289c8588

View File

@ -26,7 +26,7 @@ import { createQueryClient, fetchQuery, QueryIdentifier, QueryPage } from "@kyoo
import { useState } from "react";
import NextApp, { AppContext, type AppProps } from "next/app";
import { Poppins } from "@next/font/google";
import { useTheme, useMobileHover } from "yoshiki/web";
import { useTheme, useMobileHover, useStyleRegistry, StyleRegistryProvider } from "yoshiki/web";
import superjson from "superjson";
import Head from "next/head";
import { withTranslations } from "../i18n";
@ -80,6 +80,12 @@ const GlobalCssTheme = () => {
);
};
const YoshikiDebug = ({ children }: { children: JSX.Element }) => {
if (typeof window === "undefined") return children;
const registry = useStyleRegistry();
return <StyleRegistryProvider registry={registry}>{children}</StyleRegistryProvider>;
};
const App = ({ Component, pageProps }: AppProps) => {
const [queryClient] = useState(() => createQueryClient());
const { queryState, ...props } = superjson.deserialize<any>(pageProps ?? { json: {} });
@ -90,6 +96,7 @@ const App = ({ Component, pageProps }: AppProps) => {
useMobileHover();
return (
<YoshikiDebug>
<>
<Head>
<title>Kyoo</title>
@ -103,6 +110,7 @@ const App = ({ Component, pageProps }: AppProps) => {
</Hydrate>
</QueryClientProvider>
</>
</YoshikiDebug>
);
};