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

Question

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

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

那么，我可以做到，

const classes = useStyles();

<SomeComponent className={classes.style} />

但我也可以，

const classes = useStyles();

<SomeComponent classes={classes} />

这两者有什么区别？

Answer 1

这是 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和Inside在这个最小的例子，但MUI组件通常具有两个以上的（风格）嵌套组件。

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

MUI做什么，是它可以让你提供一个classes属性（你会在文档中的每个组件的规则名称见-root和in在我们的例子）将被合并到MUI自己的规则，或者样式表，如果你想（在MUI码本使用withStyles HOC 完成）。

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

Answer 2

className始终应用于组件的根元素，而classes通过样式对象的对象键，您可以更深入地访问组件的样式子元素。此处的文档中对此进行了解释：

https://material-ui.com/customization/components/

Answer 3

两者都用于应用样式，但有一些差异：
className属性：

• 它适用于您定义和编写的类。
• 它始终应用于根元素。

但

classes财产：

• 用于覆盖 Material UI 中定义的全局类名称。
• 仅用于 Material UI 组件，对您创建的组件没有影响。
• 它用于访问更深层次的嵌套元素。（与className应用于根元素的不同）
  例如，MuiButton-label在全局类材质 UI 中覆盖

.
.
.

const useStyles = makeStyles(theme => ({
    label: {
        color: "#fff"
    }
}));

.
.
.

const classes = useStyles()

.
.
.

<Button classes={{ label: 'my-class-name' }} />

来源：更多信息文档

Answer 4

当className属性不够用时，您需要访问更深层次的元素，您可以利用classes对象属性来自定义 Material-UI 为给定组件注入的所有 CSS。

更多信息：https : //material-ui.com/customization/components/#overriding-styles-with-classes