Material-UI makeStyles 与 withStyles 生成的类名称

Question

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

而使用withStyles生成的类和 HOC 的使用遵循以下：

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

Answer 1

第二个（可选）参数makeStyles是控制 行为的选项对象makeStyles。选项之一是名称，然后将其用作类名称的前缀。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>
  );
}