Пользовательские пользовательские интерфейсы Material-UI, удаленные при повторной визуализации компонентов

Question

У меня есть временный ящик с вкладками внутри.Когда Drawer открыт и цветовая тема переключена, пользовательские стили для компонента на вкладке удаляются, нарушая стилизацию.Если я закрываю ящик или переключаюсь между вкладками, это решает проблему.Это происходит только на двух вкладках, а не на всех.См. Рисунки ниже.

Для простоты я покажу код для вкладки «Результаты проверки».Значок Cog лишен своего стиля и по умолчанию слева.

...
const styles: StyleRulesCallback = () => ({
  buttonDiv: {
    display: 'flex',
    flexWrap: 'wrap',
    justifyContent: 'flex-end',
  },
});

...
type Props = StateProps & DispatchProps & WithStyles<typeof styles>;

class CheckResultsPanel extends React.Component<Props> {
...
render() {
    this.selectedKeys = [];
    const tree = this.renderTree();
    const { classes } = this.props;

    return (
      <div id="checkResultsPanel">
        <div className={classes.buttonDiv}>
          <IconButton onClick={this.designSettingsClick} aria-label="Design Settings">
            <SettingsIcon />
          </IconButton>
        </div>
        <Divider />
        {tree}
      </div>
    );
  }

Указанные компоненты импортируются в ящик следующим образом:

      <div className="right-sidebar-container">
        <div id="loadCaseObjectTabs" className={classes.root}>
          <AppBar position="static">
            <Tabs value={this.state.topValue} onChange={this.topHandleChange} fullWidth>
              <Tab label="Objects" />
              <Tab label="Load Cases" />
            </Tabs>
          </AppBar>
          {topValue === 0 ? <div className={classes.tabs}><NavigationPanel /></div> : undefined}
          {topValue === 1 ? <div className={classes.tabs}><LoadCasesPanel /></div> : undefined}
        </div>
        <div id="checkResultsPropertiesTabs" className={classes.root}>
          <AppBar position="static">
            <Tabs value={bottomTabIndices[this.props.bottom]} onChange={this.bottomHandleChange} fullWidth>
              <Tab label="Check Results" />
              <Tab label="Properties" />
            </Tabs>
          </AppBar>
          {this.props.bottom === 'checkResults' ? <div className={classes.tabs}><CheckResultsPanel /></div> : undefined}
          {this.props.bottom === 'properties' ? <div className={classes.tabs}><PropertiesPanel /></div> : undefined}
        </div>
      </div>

Answer 1

Мы обнаружили проблему.Извиняюсь за расплывчатый пример.Проблема была вызвана нашей оптимизацией.Компонент был настроен на обновление только в том случае, если были изменены определенные реквизиты и классы не проходили через эту логику.Когда темы были переключены, он изменил все стили для приложения, но поскольку компонент не обновлялся, стили не применялись.

shouldComponentUpdate(nextProps: Props) {
...
    if (this.props.classes !== nextProps.classes) return true;
...
}