Material-UI的makeStyles和withStyles生成的类名有什么区别？

Question

我注意到使用 makeStyles 和钩子的类遵循这种命名方式：

而使用 withStyles 和高阶组件生成的类则遵循以下方式：

有没有办法在使用 makeStyles （我喜欢使用钩子）的同时保持 withStyles 的名称？我想这样做是因为它更容易在浏览器中分析HTML并确定每个元素所生成的类。

- GoncaloNGT

---

感谢 @RyanCogswell 指出这个问题，我已经编辑了我的帖子。 - GoncaloNGT

Answer 1

makeStyles的第二个（可选）参数是一个选项对象，用于控制makeStyles的行为。其中一个选项是name，然后将其用作类名的前缀。 withStyles将Component.displayName作为name选项传递。您可以指定任何名称以控制类名前缀，例如在下面的示例中，类名最终变为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>
  );
}

- Ryan Cogswell

---

非常感谢，这正是我想要的。 - GoncaloNGT