Material-UI makeStyles 与生成的 withStyles class 个名称

Question

我注意到使用 makeStyles 生成的 classes 和钩子的使用遵循以下命名法：

而使用 withStyles 生成的 classes 和 HOC 的使用如下：

有没有办法在使用 makeStyles（我喜欢使用 hooks）的同时保留 withStyles 的 命名法？我喜欢这个，因为它更容易在浏览器中分析 html 并查明生成每个元素的 class。

Answer 1

makeStyles 的第二个（可选）参数是一个选项对象，用于控制 makeStyles 的行为。其中一个选项是 name which is then used as a prefix for the class names. withStyles passes Component.displayName 作为 name 选项。您可以指定您想要的任何名称以控制 class 名称前缀，例如在我下面的示例中 class 名称最终为 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>
  );
}