javascript - 何时将 'classes' 与 'className' 与 Material UI 一起使用？

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 的一个非常令人困惑的方面，但是一旦你得到它 - 它就 super 容易。
假设您正在编写一个组件，并使用 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 code 中使用 withStyles HOC)。
为方便起见，每个组件也接受 className合并到根元素的 className 中的属性(在我们的例子中是 Outside)。