material-ui 中的 makeStyles 到底是什么？

Question

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

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

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

感谢 Stack Overflow 的好人。

Answer 1

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

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

makeStyles只是一个继承者，它返回一个钩子（访问自定义类）。现在，这只是一种现代反应的做事方式，以避免 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} />;
}