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.
Advertisement
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