From ba4106eec1e158667c01af502f5e4f3c6a85e75a Mon Sep 17 00:00:00 2001 From: garronej Date: Tue, 8 Mar 2022 21:54:35 +0100 Subject: [PATCH] #65 --- src/test/apps/ssr/pages/_app.tsx | 56 ++++++++++++++++++++++++++- src/test/apps/ssr/pages/_document.tsx | 2 +- src/test/apps/ssr/pages/index.tsx | 50 +----------------------- 3 files changed, 56 insertions(+), 52 deletions(-) diff --git a/src/test/apps/ssr/pages/_app.tsx b/src/test/apps/ssr/pages/_app.tsx index 2997890..c407d3d 100644 --- 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) \ No newline at end of file +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 ( + <> + + Create Next App + + + + + + + + + + + ); + +} + +export default withDarkMode(App); \ No newline at end of file diff --git a/src/test/apps/ssr/pages/_document.tsx b/src/test/apps/ssr/pages/_document.tsx index e8060a9..43ef3a7 100644 --- 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 index d942194..abf2594 100644 --- 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 ( - <> - - Create Next App - - - - - - - - - - - ); -} - -function Root() { - const { css } = useStyles(); return (