withStyles doesn't refresh correctly with Hot Module Replacement

When using HMR in conjuction with the withStyles method, the updates are not applied properly. I’ve looked through the closed/open issues I could find and don’t believe this is a duplicate. Could be a regression.

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

Change response of withStyles(styleFunction), update/add Style element in head and update component with current className reference.

Current Behavior 😯

I see a new Style entry in the head, but the component does not reflect the updated/new style.

Steps to Reproduce 🕹

It seems to be a new issue at least within the past month. Maybe a point update for either HMR, but more likely the withStyles under material-ui/core.

Your Environment 🌎

Node: 11.3.0, Windows 10 using webpack dev server and react-hmr.

Tech	Version
Material-UI	v3.32.2
React	v16.4.1
Browser	Chrome/71.0.3578.98
TypeScript	N/A
react-hot-loader	4.3.4

Component.jsx

import { withStyles } from '@material-ui/core/styles';
import { connect } from 'react-redux';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';

import * as Actions from './action';

const mapStateToProps = ({ pageReviewManual }) => ({ state: pageReviewManual });

const styles = theme => ({
  mainRow: {
    marginTop: theme.spacing.unit * 3,
  },

  pageTitle: {
    marginTop: theme.spacing.unit * 2,
    backgroundColor: '#eee',  // This is the value I was using to play with.
  },

  divider: {
    marginTop: theme.spacing.unit * 2,
    borderTop: `1px solid #888`,
    paddingTop: theme.spacing.unit,
  },
});

export class PageReviewManual extends Component {
  render = _ => {
    const { classes } = this.props;
    console.log({ classes }); // <-- re-render happens, but classes are not reflecting current styles
    return (
      <div>
        <Grid item>
          <Typography variant="h1" className={classes.pageTitle}>
            Add Page
          </Typography>
        </Grid>

        <Grid container direction="row" className={classes.mainRow}>
          <Grid item xs={6} sm={2}>
            FORM
          </Grid>
          <Grid item xs={6} sm={2}>
            REASONS
          </Grid>
        </Grid>
        <Grid container direction="row">
          <Grid item xs={12} sm={4}>
            <div className={classes.divider} />
          </Grid>
        </Grid>
        <Grid container direction="row">
          <Grid item xs={6} sm={2} />
          <Grid item xs={6} sm={2}>
            ACTIONS
          </Grid>
        </Grid>
        <Grid container direction="row">
          HISTORY
        </Grid>
      </div>
    );
  };
}

export default connect(
  mapStateToProps,
  Actions
)(withStyles(styles)(PageReviewManual));

[tracker1]

Removed react-hot-loader, and seems to be working better, I’m mostly using redux for state persisting to session-storage, so less of an issue for me. Thanks.

Should probably make a note in the docs somewhere.

[eps1lon]

@eps1lon Why are you mentioning me?

My mistake, sorry