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} />;
  }