Material-UI theme does not change back

Question

I've been trying to apply theme to my React app with Material-UI ThemeProvider and am encountering some strange behavior.

I have two themes: day mode and night mode. At app start, night mode is default, and user can switch theme with checkbox.

Theme switching normally from night mode to day mode, but it does not switch back.

Here is the example app, reproducing this behavior:
https://codesandbox.io/s/eloquent-ives-k1np1

What am I doing wrong?

Answer 1

Okay after some changes it looks like you need a fresh copy of the theme to be set in the state each time. I know material memoizes the provider but not sure why your example does not work...

here is a codesandbox with a working version... the only change is making a shallow copy of the theme, you may want to just create the theme on demand instead of storing it locally.

https://codesandbox