material-ui 中的 makeStyles 到底是什么？ [复制]

Question

我刚开始学习 React material-ui，发现了这个 makeStyles 函数，他们说它返回一个 Hook。

我记得在 React 钩子中，自定义钩子是通过包装一个内置钩子来制作的。我尝试查看 makeStyles 内部，它具有一些互操作性和一些 css-in-javascript 模式。

我真的厌倦了一遍又一遍的规则。现在有人可以告诉我这个makeStyle 函数是什么，也许可以建议一种更好的方法来阅读material-ui。

感谢 Stack Overflow 的好人。

Answer 1

如果您熟悉旧版本的 Material-UI，您可能使用过 withStyles，在 MUI 组件中使用您的自定义样式。

withStyles 只是一个 HOC（高阶组件），用作包装器，用于将 classes 属性分配给您的组件。您可以进一步使用 classes 对象为组件中的 DOM 或 MUI 元素分配特定的类。

ma​​keStyles 只是一个后继者，它返回一个钩子（访问自定义类）。现在这只是为了避免 HOC 的现代反应方式。

MUI v3.9.3

import { withStyles } from '@material-ui/core/styles';

const styles = {
  root: {
    backgroundColor: 'red'
  },
};

class MyComponent extends React.Component {
  render () {
    return <div className={this.props.classes.root} />;
  }
}

export default withStyles(styles)(MyComponent);

MUI v4.9.5

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  root: {
    backgroundColor: 'red'
  },
});

export default function MyComponent(props) {
  const classes = useStyles(props);
  return <div className={classes.root} />;
}