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

Question

我注意到用 生成的类makeStyles 并且钩子(Hook)的使用遵循以下命名法:

而用 生成的类withStyles 和 HOC 的使用遵循这一点:

有没有办法使用 makeStyles (我喜欢使用钩子(Hook))但保留 withStyles 的命名法 ?我喜欢这个是因为在浏览器中分析 html 并确定生成每个元素的类更容易。

Answer 1

makeStyles 的第二个(可选)参数是控制 makeStyles 行为的选项对象.选项之一是 name然后用作类名的前缀。 withStyles passes 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>
  );
}