为什么我们在Material UI中使用makeStyles？

Question

我可以告诉我们可以直接在组件中设置样式。在这种情况下，只需使代码更冗长即可。

不带有“ makeStyles”的示例：

function Products() {
return (
    <Toolbar style={{ minHeight: 40 }}>  // <- In line CSS, but you could make an object too
      <Grid container justify="space-between">
        <Grid>
          <Typography variant="overline">Products</Typography>
        </Grid>
        <Button variant="contained" color="primary" startIcon={<AddCircleIcon />}>
          New Product
        </Button>
      </Grid>
    </Toolbar>
  );
}

在Material UI文档中，我们看到了这一点（在这种情况下不完全是这样）：

const useStyles = makeStyles({
 root: {
    minHeight: 40
  },
});

function Products() {
const classes = useStyles()
return (
    <Toolbar className={classes.toolbar}>  // <- why we do this?
      <Grid container justify="space-between">
        <Grid>
          <Typography variant="overline">Products</Typography>
        </Grid>
        <Button variant="contained" color="primary" startIcon={<AddCircleIcon />}>
          New Product
        </Button>
      </Grid>
    </Toolbar>
  );
}

我在这里看不到东西吗？这种更详细的代码有其好处？