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:

Is there a way to use makeStyles (I like to use hooks) but keep the nomenclature of withStyles? I'd like this because it's easier to analyze the html in the browser and pinpoint the class that generated each element.

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

export default function App() {
  const classes = useStyles();
  return (
    <div>
      <h1 className={classes.root}>Hello CodeSandbox</h1>
    </div>
  );
}