Question

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

我记得在React钩子中，通过包装内置钩子来制作自定义钩子。我尝试查看makeStyles里面的内容，它具有一些互操作性和CSS脚本模式。

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

谢谢Stack Overflow的好人。

Answer 1

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

withStyles只是一个HOC（高阶组件），用作包装器，用于为组件分配 classs 属性。您可以进一步使用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} />;
}

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

1 个答案: