Блог

Главная - Вопросы по программированию - Изменения состояния темы будут повторно отображаться только один раз в ThemeProvider

Изменения состояния темы будут повторно отображаться только один раз в ThemeProvider

#reactjs #material-ui

#reactjs #материал-пользовательский интерфейс

Вопрос:

Я новичок в ReactJS, и я хочу изменить тему, просто нажав кнопку. Но это работает только при однократном нажатии кнопки, каждый последующий щелчок не будет иметь никакого эффекта.

 class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      theme: DarkTheme
    };
  }

  render() {
    return (
      <ThemeProvider theme={this.state.theme}>
        <div className="App">
          <Toolbar>
            <Button
              onClick={() => {
                this.setState({
                  theme: LightTheme
                });
              }}
            >
              <Typography color="primary" variant="body1">
                Light
              </Typography>
            </Button>
            <Button
              onClick={() => {
                this.setState({
                  theme: DarkTheme
                });
              }}
            >
              <Typography color="primary" variant="body1">
                Dark
              </Typography>
            </Button>
          </Toolbar>

          <Typography color="primary" variant="body1">
            Some text here that should always be displayed in primary color of current theme
          </Typography>
        </div>
      </ThemeProvider>
    );
  }
}

CodeSandbox

Кто-нибудь может объяснить, что я сделал не так?

Использование @material-ui/core@v.5.0.0-alpha.8

Ответ №1:

Выполните копирование вашего объекта темы при установке нового состояния, и оно должно работать

 onClick={() => {
  this.setState({
    theme: {...LightTheme}
  });
}}

Комментарии:

1.Честно говоря, ответ, который я предоставил, основан на интуиции. Вам придется углубиться в код MUI или документы, чтобы узнать. Я предполагаю, что в дочерних компонентах происходит некоторое сравнение объекта темы и что некоторые условия не выполняются (например, запоминаемые объекты), поэтому некоторые компоненты не обновляются. Возвращаемый объект createMuiTheme намного больше, чем вы ожидали. Также смотрите Использование React.memo here