Reactjs / Material UI => MuiTheme and rerender not work when theme are already render

I am learning React and I try to use Material Ui for UI design.

I have follow some example to understand who manage custom Theme and MuiTheme. For now I am interested by the MuiTheme and MuiThemeProvider.

On my example I have define 3 simple MuiTheme overides (red, green, blue).

The theme switcher work fine when we click on the button for a not already rendered theme. When I click on the button switcher for an already redered theme nothing append or nothing in front view. Indeed if we look on the react development puglin we see that the background color is well change as expected but the interface is not refresh.
The problem look like a rerender condition never true since a theme was load in memory.

Could you help me to understand why I can’t come back to an old theme ?

For a reproduction process you can press green button, next blue, and next all button that you want.

My code can looked and play here :
https://codesandbox.io/s/material-ui-theme-test-w1bbg
App.js

import React, { Fragment, useContext, useState } from "react";

import { AppBar, Button, Toolbar, Typography } from "@material-ui/core";
import { MuiThemeProvider } from "@material-ui/core";
import { getThemeByName } from "./theme";

export const ThemeProvider = (props) => {
  const [themeName, _setThemeName] = useState("redTheme");
  const theme = getThemeByName(themeName);

  return (
    <ThemeContext.Provider value={_setThemeName}>
      <MuiThemeProvider theme={theme}>{props.children}</MuiThemeProvider>
    </ThemeContext.Provider>
  );
};

const ThemeContext = React.createContext((theme) => {});

function App() {
  const setThemeName = useContext(ThemeContext);

  return (
    <Fragment>
      <AppBar position="static">
        <Toolbar variant="dense">
          <Typography variant="h6" color="inherit">
            <Button
              variant="contained"
              color="primary"
              onClick={() => setThemeName("blueTheme")}
            >
              Set blue Theme
            </Button>
            <Button
              variant="contained"
              color="secondary"
              onClick={() => setThemeName("greenTheme")}
            >
              Set green Theme
            </Button>
            <Button
              variant="contained"
              color="secondary"
              onClick={() => setThemeName("redTheme")}
            >
              Set red Theme
            </Button>
          </Typography>
        </Toolbar>
      </AppBar>
    </Fragment>
  );
}

export default App;

index.js

import { StrictMode } from "react";
import ReactDOM from "react-dom";

import App, { ThemeProvider } from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </StrictMode>,
  rootElement
);

theme.js

const { createMuiTheme } = require("@material-ui/core");

export const redTheme = createMuiTheme({
  palette: {
    primary: {
      main: "#FF0000"
    }
  }
});

export const greenTheme = createMuiTheme({
  palette: {
    primary: {
      main: "#008000"
    }
  }
});

export const blueTheme = createMuiTheme({
  palette: {
    primary: {
      main: "#0000FF"
    }
  }
});

export function getThemeByName(theme) {
  return themeMap[theme];
}

const themeMap = {
  redTheme,
  greenTheme,
  blueTheme
};

Source: Ask Javascript Questions

LEAVE A COMMENT