material UI中withStyles和makeStyles的区别

  在material UI中，withStyles和makeStyles是经常使用的两个用于封装样式的函数。对于刚使用material UI的开发者而言，可能不太清楚这两者的区别。

  本文简要探究这两者之间的功能和使用上的差异。

差异一：内部是否可以使用props的差异

• withStyles内部不可以使用props。也就是说你的样式不能与你的props有关联。如果有关联，withStyles是无法实现的，那么你应该使用makeStyles。
• makeStyles内部可以使用props。事实上，它的诞生就是为了解决withStyles无法通过props设置样式的缺陷。

差异二：使用方法上的区别

• withStyles：

  • 需要从@material-ui/core中导入

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

  • 直接调用withStyles函数即可，如

   export default withStyles(styles)(Parent);
  

• makeStyles：

  • 需要从@material-ui/core/styles中导入

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

  • 需要先调用一次，再在组件内部调用：

  const useStyles = makeStyles({
    root: {
      backgroundColor: 'red',
      color: props => props.color,
    },
  });
  
  export default function MyComponent(props) {
    const classes = useStyles(props);
    return <div className={classes.root} />;
  }