question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

useDarkMode Next.js issue

See original GitHub issue

When 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:closed
  • Created 2 years ago
  • Comments:5 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
PabloLIONcommented, Jan 18, 2022
0reactions
juliencrncommented, Jan 19, 2022

We can’t read localStorage and mediaQueries 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 the ThemeProvider in mounted in client-side only code.

@emulienfou, Could you create a minimal reproduction of the bug to play with it?

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found