Material-ui v4 shows component names in html DOM class attributes?

After migrating from material-ui v3 to v4, noticed the react component/function name in the class attribute inside the HTML.

Is that expected? Might this somehow affect overriding class properties already noticing issues when trying to override with new styles which do not apply.

Also is there a possibility to remove those?

The component names are: WrapperComponent, withRouter, CustomerDetailsContainer among others.

Answer

Material-UI uses class name generator to generate unique class names for styled components to enable style isolation. The classname prefix is different depending on the current environment.

• In non-production mode, the displayed name of the component is used as classname prefix
• In production mode, by default jss is used as classname prefix

You can fake the environment by setting process.env.NODE_ENV at the beginning of the program to see the change in classname prefix

// change to "production" to see the different in classname prefix
process.env.NODE_ENV = "development";

class App extends React.Component {
  static displayName = "MyFabulousApp";

  render() {
    const { classes } = this.props;
    return <div className={classes.root}>Hello world</div>;
  }
}

const styles = {
  root: {
    backgroundColor: "grey"
  }
};

const AppWithRouter = withRouter(App);
const MyApp = withStyles(styles)(AppWithRouter);

console.log(AppWithRouter.displayName); // withRouter(MyFabulousApp)-root-1

Generated class name of the element in development

withRouter(MyFabulousApp)-root-1

In production

jss1

Live Demo