时间戳

首页 > 解决方案 > material-ui 中的 makeStyles 到底是什么？

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

问题描述

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

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

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

感谢 Stack Overflow 的好人。

标签： reactjsmaterial-uireact-material

解决方案

如果您熟悉旧版本的 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} />;
}

推荐阅读