Material-UI makeStyles vs withStyles generated class names

Question

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.

Thanks for pointing that out @RyanCogswell, I've just edited my post — GoncaloNGT, Jun 23 '21 at 00:43

score 2 · Accepted Answer · answered Jun 23 '21 at 00:49

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>
  );
}

Thank you so much, that's exactly what I wanted – GoncaloNGT Jun 23 '21 at 12:29 — GoncaloNGT, Jun 23 '21 at 12:29

Material-UI makeStyles vs withStyles generated class names

1 Answers1

Linked