#65

garronej · Mar 8, 2022 · ba4106e · ba4106e
1 parent 4f508de
commit ba4106e
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 52 deletions.
diff --git a/src/test/apps/ssr/pages/_app.tsx b/src/test/apps/ssr/pages/_app.tsx
@@ -1,4 +1,56 @@
-import App from "next/app";
+import { useMemo } from "react";
+import Head from "next/head";
 import withDarkMode from "next-dark-mode";
+import type { AppProps } from 'next/app'
+import { useDarkMode } from "next-dark-mode";
+import type { EmotionCache } from "@emotion/cache";
+import createCache from "@emotion/cache";
+import { ThemeProvider as MuiThemeProvider } from "@mui/material/styles";
+import { createTheme } from "@mui/material/styles";
+import CssBaseline from "@mui/material/CssBaseline";
+import { CacheProvider } from '@emotion/react';
 
-export default withDarkMode(App)
+let muiCache: EmotionCache | undefined = undefined;
+
+export const createMuiCache = () => muiCache = createCache({ "key": "mui", "prepend": true });
+
+export function App({ Component, pageProps }: AppProps) {
+
+	const { darkModeActive } = useDarkMode();
+
+	const theme = useMemo(
+		() => createTheme({
+			"palette": {
+				"mode": darkModeActive ? "dark" : "light",
+				"primary": {
+					"main": "#32CD32" //Limegreen
+				}
+			},
+			"typography": {
+				"subtitle2": {
+					"fontStyle": "italic"
+				}
+			}
+		}),
+		[darkModeActive]
+	);
+
+	return (
+		<>
+			<Head>
+				<title>Create Next App</title>
+				<meta name="description" content="Generated by create next app" />
+				<link rel="icon" href="/favicon.ico" />
+			</Head>
+			<CacheProvider value={muiCache ?? createMuiCache()}>
+				<MuiThemeProvider theme={theme}>
+					<CssBaseline />
+					<Component {...pageProps} />
+				</MuiThemeProvider>
+			</CacheProvider>
+		</>
+	);
+
+}
+
+export default withDarkMode(App);
diff --git a/src/test/apps/ssr/pages/_document.tsx b/src/test/apps/ssr/pages/_document.tsx
@@ -1,6 +1,6 @@
 import BaseDocument from "next/document";
 import { withEmotionCache } from "tss-react/nextJs";
-import { createMuiCache } from "./index";
+import { createMuiCache } from "./_app";
 
 export default withEmotionCache({
     "Document": BaseDocument,

diff --git a/src/test/apps/ssr/pages/index.tsx b/src/test/apps/ssr/pages/index.tsx
@@ -1,65 +1,17 @@
 import Head from "next/head";
-import { useMemo, memo } from "react";
+import { memo } from "react";
 import { GlobalStyles, useMergedClasses } from "tss-react";
 import { makeStyles, useStyles, withStyles } from "../shared/makeStyles";
 import { styled } from "@mui/material";
 import Button from "@mui/material/Button"
-import { ThemeProvider as MuiThemeProvider } from "@mui/material/styles";
-import { createTheme } from "@mui/material/styles";
-import CssBaseline from "@mui/material/CssBaseline";
 import Breadcrumbs from "@mui/material/Breadcrumbs";
 import { useDarkMode } from "next-dark-mode";
-import { CacheProvider } from '@emotion/react';
-import type { EmotionCache } from "@emotion/cache";
-import createCache from "@emotion/cache";
 import Typography from "@mui/material/Typography";
 import type { CSSObject } from "tss-react";
 import InputBase from "@mui/material/InputBase";
 
-let muiCache: EmotionCache | undefined = undefined;
-
-export const createMuiCache = () => muiCache = createCache({ "key": "mui", "prepend": true });
-
 export default function Index() {
 
-    const { darkModeActive } = useDarkMode();
-
-    const theme = useMemo(
-        () => createTheme({
-            "palette": {
-                "mode": darkModeActive ? "dark" : "light",
-                "primary": {
-                    "main": "#32CD32" //Limegreen
-                }
-            },
-            "typography": {
-                "subtitle2": {
-                    "fontStyle": "italic"
-                }
-            }
-        }),
-        [darkModeActive]
-    );
-
-    return (
-        <>
-            <Head>
-                <title>Create Next App</title>
-                <meta name="description" content="Generated by create next app" />
-                <link rel="icon" href="/favicon.ico" />
-            </Head>
-            <CacheProvider value={muiCache ?? createMuiCache()}>
-                <MuiThemeProvider theme={theme}>
-                    <CssBaseline />
-                    <Root />
-                </MuiThemeProvider>
-            </CacheProvider>
-        </>
-    );
-}
-
-function Root() {
-
     const { css } = useStyles();
 
     return (