何时在 Material UI 中使用“classes”与“className”？

我对这两个属性有点困惑。如果我有，

const useStyles = makeStyles(() => ({
  style: {
    width: 600,
    height: 400,
  },
}));

那么，我可以做的是，

const classes = useStyles();

<SomeComponent className={classes.style} />

但我也可以做到，

const classes = useStyles();

<SomeComponent classes={classes} />

这两者有什么区别？

这是 MUI 的一个非常令人困惑的方面，但是一旦你掌握了它 - 它就非常简单了。

假设您正在编写一个组件，并使用 JSS 对其进行样式设置：

const useStyles = makeStyles(theme => ({
  root: {
    margin: theme.spacing(1)
  },
  in: {
    padding: 8
  }
}));

function MyComponent(){
  const classes = useStyles();
  return (
    <Outside className={classes.root}>
      <Inside className={classes.in} />
    </Outside>
  )
}

请注意，组件本质上是组件的组合（或层次结构） -Outside and Inside在这个最小的示例中，但 MUI 组件通常具有两个以上（样式化）嵌套组件。

现在您想要将此组件导出为库的一部分，并允许开发人员设计所有涉及的组件的样式（包括Outside and Inside）。你会怎么做？

MUI 的作用是让您提供classes属性（您将在文档中看到每个组件的规则名称 -root and in在我们的例子中）这将是merged如果您愿意的话，可以将其放入 MUI 自己的规则或样式表中（在MUI code https://github.com/mui-org/material-ui/blob/4fba0dafd30f608937efa32883d151ba01fc9681/packages/material-ui/src/Checkbox/Checkbox.js#L181这是使用withStyles HOC https://material-ui.com/styles/advanced/#withstyles).

为了方便起见，每个组件还接受className合并到根元素的 className 中的属性 (Outside在我们的例子中）。