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

Question

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

而用withStyles生成的类和 HOC 的使用遵循这个：

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

标签： htmlreactjsreact-hooksmaterial-uihigh-order-component

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