Move useStyle inside TheProvider component

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 darkMode={darkMode} setDarkMode={setDarkMode} />
-        </Box>
+        <SwitchTheme switchFixed={switchFixed} darkMode={darkMode} setDarkMode={setDarkMode} />
         {Component.auth ? (
           <Auth><Component {...pageProps} /></Auth>
         ) : (