import PropTypes from 'prop-types'; import Head from 'next/head'; import { CacheProvider } from '@emotion/react'; import theme from '../src/theme'; import createEmotionCache from '../src/createEmotionCache'; import Layout from '../components/Layout' import * as React from 'react'; import App from 'next/app'; import { useState } from "react"; import "@fontsource/roboto"; import { CssBaseline, FormGroup, } from "@mui/material"; import { createTheme, ThemeProvider } from "@mui/material/styles"; import Grid from "@material-ui/core/Grid"; import { makeStyles } from "@material-ui/core"; import { useTheme } from "@material-ui/core/styles"; import useMediaQuery from "@material-ui/core/useMediaQuery"; import { withTheme } from "../components/light_dark"; import FormControlLabel from "@material-ui/core/FormControlLabel"; import Switch from "@material-ui/core/Switch"; const useStyles = makeStyles((theme) => ({ root: { width: "100%", height: "100%", [theme.breakpoints.down("xs")]: { paddingTop: theme.spacing(2), }, }, })); const DynamicComponentWithNoSSR = <>Some JSX // Client-side cache, shared for the whole session of the user in the browser. const clientSideEmotionCache = createEmotionCache(); function MyApp(props) { const { darkMode, setDarkMode } = props; const classes = useStyles(); const Theme = useTheme(); const matches = useMediaQuery(theme.breakpoints.down("xs")); const { Component, emotionCache = clientSideEmotionCache, pageProps } = props; if (typeof window !== 'undefined') { console.log('You are on the browser') } else { console.log('You are on the server') } return ( <> {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */} withTheme(!theme)} /> } label="Dark Mode" /> ); } MyApp.propTypes = { Component: PropTypes.elementType.isRequired, emotionCache: PropTypes.object, pageProps: PropTypes.object.isRequired, }; export default withTheme(MyApp);