Material-ui Makestyles Vs Withstyles Generated Class Names

I've noticed that classes generated with makeStyles and the use of hooks follow this nomenclature: while the classes generated with withStyles and the use of HOC follow this one:

Solution 1:

The second (optional) argument to makeStyles is an object of options to control the behavior of makeStyles. One of the options is a name which is then used as a prefix for the class names. withStylespasses Component.displayName as the name option. You can specify whatever name you want in order to control the class name prefix, for instance in my example below the class name ends up being Hello-root-1.

import { makeStyles } from"@material-ui/core/styles";

const useStyles = makeStyles(
  {
    root: {
      backgroundColor: "green"
    }
  },
  { name: "Hello" }
);

exportdefaultfunctionApp() {
  const classes = useStyles();
  return (
    <div><h1className={classes.root}>Hello CodeSandbox</h1></div>
  );
}