reactjs - Material-ui 中的 makeStyles 到底是什么？

Question

这个问题已经有答案了:

Internal implementation of "makeStyles" in React Material-UI? (2 个回答)

已关闭 1 年前。

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

我记得在 React hooks 中，自定义钩子(Hook)是通过包装内置钩子(Hook)来制作的。我试着往里面看makeStyles ，并且它具有一定的互操作性和一些 css-in-javascript 模式。

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

感谢 Stack Overflow 的好心人。

Answer 1

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

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

ma​​keStyles 只是一个后继者，它返回一个钩子(Hook)(以访问自定义类)。现在这只是一种现代 React 的做事方式，以避免 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} />;
}