CODEWITHSUNDEEP
reactjsmaterial-uijss
FilipeG
FilipeG

Reputation: 167

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

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

Upvotes: 4

Views: 1906

Answers (2)

GrindingSoftwareDev
GrindingSoftwareDev

Reputation: 21

You can create a Strict Mode Theme with the following import.

import { unstable_createMuiStrictModeTheme } from "@material-ui/core/styles";

But as you can see it says unstable and I don't know the disadvantages of creating a theme that way, for the moment it's working on my personal projects while having a global Strict Mode.

Documentation

Upvotes: 1

Ryan Cogswell
Ryan Cogswell

Reputation: 80976

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.

Upvotes: 3

Related Questions