useDarkMode Next.js issue
See original GitHub issueWhen using the hook useDarkMode
and I presume it could be the same issue for other hooks with Next.js framework and Material-UI, I get the error message: Prop className did not match.
In the console log, the error refer to the documentation: https://nextjs.org/docs/messages/react-hydration-error
Here is my current code generating this error:
const { isDarkMode } = useDarkMode()
const theme = useMemo(
() =>
createTheme(themeOptions(isDarkMode ? 'dark' : 'light')),
[isDarkMode]
)
The way I was able to fix this error to happen was changing my code to:
const [dark, setDark] = useState(false)
const { isDarkMode } = useDarkMode()
useEffect(() => {
setDark(isDarkMode)
}, [isDarkMode])
const theme = useMemo(
() =>
createTheme(themeOptions(dark ? 'dark' : 'light')),
[dark]
)
I do not know if this error is actually related to the hooks or maybe with the useMemo
hook instead!
Issue Analytics
- State:
- Created 2 years ago
- Comments:5 (4 by maintainers)
Top Results From Across the Web
Is there any way to implement useDarkMode config static or ...
I'm trying to implement the configuration for useDarkMode hook, it works when NextJS uses CSR, but has an error when renders in server-side....
Read more >Theming in Next.js with styled-components and useDarkMode
Efficiently implement a dark mode and theme a Next.js app using the styled-components library and the useDarkMode Hook.
Read more >Adding dark mode with Next.js, styled-components, and ...
Adding dark mode with Next.js, styled-components, and useDarkMode ... Knowing whether or not a person wants dark mode is just the first step...
Read more >A UseDarkMode react hook for everyone! - DEV Community
So a while ago I came across an issue whilst developing. I was creating a solution in nextjs with typescript and using tailwind...
Read more >TailwindCSS Dark Mode in Next.js with Tailwind Typography ...
There are several relatively complicated ways you might approach the problem of toggling themes. As with many things in the React.js and Next.js...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
may be its related to this comment https://github.com/juliencrn/usehooks-ts/pull/86#pullrequestreview-855192893
We can’t read
localStorage
andmediaQueries
window API on SSR, it isn’t an easy problem. You can try to set an arbitrary default theme mode, then, updating it during the hydration, or ensure that theThemeProvider
in mounted in client-side only code.@emulienfou, Could you create a minimal reproduction of the bug to play with it?