reactjs - Material-UI unchanged colors when switching back and forth between themes

Question

I'm changing the theme in my application via a state variable and the MuiThemeProvider When switching the active theme the colors on all components update correctly, but only once. If I switch back to a theme that's already been used the colors do not update.

https://codesandbox.io/s/focused-mcnulty-0tzm2?file=/src/App.js

You can see that on the codesandbox, switching back and forth causes the last theme to "stick" if the theme you're changing to has already been used.

I can "fix" this issue by using theme.palette.primary.main on makeStyles() when styling my components but that kinda defeats the purpose of the color properties for the components

Answer 1

Material-UI does not yet fully support StrictMode (https://github.com/mui-org/material-ui/issues/20708). If you remove the <React.StrictMode> tags in index.js it works fine.

Here's a working version of your sandbox: https://codesandbox.io/s/strictmode-theme-switching-issues-7prfe.