Move useStyle inside TheProvider component

components/switch-theme.js

@@ -1,25 +1,45 @@
 import PropTypes from 'prop-types'
 import WbSunnyIcon from '@material-ui/icons/WbSunny'
 import Brightness3Icon from '@material-ui/icons/Brightness3'
+import {Box, makeStyles} from '@material-ui/core'
 
-export default function SwitchTheme({darkMode, setDarkMode}) {
+const useStyles = makeStyles({
+  switch: {
+    position: 'absolute',
+    right: '1em',
+    top: '95px',
+    zIndex: 1,
+    cursor: 'pointer'
+  },
+  switchFixed: {
+    position: 'fixed',
+    right: '1em',
+    top: '95px',
+    zIndex: 9990,
+    cursor: 'pointer'
+  }
+})
+
+export default function SwitchTheme({switchFixed, darkMode, setDarkMode}) {
+  const classes = useStyles()
   const handleClick = () => {
     localStorage.setItem('oki-dark', !darkMode)
     setDarkMode(!darkMode)
   }
 
   return (
-    <div>
+    <Box className={switchFixed ? classes.switchFixed : classes.switch}>
       {darkMode ? (
         <WbSunnyIcon onClick={handleClick} />
       ) : (
         <Brightness3Icon onClick={handleClick} />
       )}
-    </div>
+    </Box>
   )
 }
 
 SwitchTheme.propTypes = {
+  switchFixed: PropTypes.bool.isRequired,
   darkMode: PropTypes.bool.isRequired,
   setDarkMode: PropTypes.func.isRequired
 }

pages/_app.js

@@ -1,35 +1,16 @@
 import {useEffect, useMemo, useState} from 'react'
 import {useRouter} from 'next/router'
 import PropTypes from 'prop-types'
-import {createMuiTheme, ThemeProvider, makeStyles} from '@material-ui/core/styles'
+import {createMuiTheme, ThemeProvider} from '@material-ui/core/styles'
 import CssBaseline from '@material-ui/core/CssBaseline'
 import {Provider, useSession} from 'next-auth/client'
-import {Box} from '@material-ui/core'
 
 import SwitchTheme from '../components/switch-theme'
 
-const useStyles = makeStyles({
-  switch: {
-    position: 'absolute',
-    right: '1em',
-    top: '95px',
-    zIndex: 1,
-    cursor: 'pointer'
-  },
-  switchFixed: {
-    position: 'fixed',
-    right: '1em',
-    top: '95px',
-    zIndex: 9990,
-    cursor: 'pointer'
-  }
-})
-
 export default function MyApp(props) {
   const {Component, pageProps} = props
   const [darkMode, setDarkMode] = useState(false)
   const [switchFixed, setSwitchFixed] = useState(false)
-  const classes = useStyles()
 
   const darkTheme = useMemo(() => createMuiTheme({
     palette: {
@@ -71,9 +52,7 @@ export default function MyApp(props) {
     <ThemeProvider theme={darkTheme}>
       <CssBaseline />
       <Provider session={pageProps.session}>
-        <Box className={switchFixed ? classes.switchFixed : classes.switch}>
+        <SwitchTheme switchFixed={switchFixed} darkMode={darkMode} setDarkMode={setDarkMode} />
-          <SwitchTheme darkMode={darkMode} setDarkMode={setDarkMode} />
-        </Box>
         {Component.auth ? (
           <Auth><Component {...pageProps} /></Auth>
         ) : (