Material-UI custom JSS Styles removed on Component Re-render

Question

I have a temporary Drawer with Tabs inside. When the Drawer is open and the color theme is toggled, the custom styles for the component in the tab are removed, breaking the styling. If I close the Drawer or toggle between tabs, it fixes the issue. This is only happening in two of the tabs, not all of them. See the pictures below.

For simplicity, I'll show the code for the Check Results tab. The Cog icon is being stripped of its styling and defaulting to the left.

...
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>
    );
  }

The components in question are being imported to the Drawer like so:

      <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

We discovered the issue. Apologies for the vague example. The issue was caused by optimization we implemented. The component was only set to update if certain props were changed and the classes were not being passed through this logic. When the themes were toggled, it changed all the styling for the application but since the component did not update the styles were not being applied.

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