javascript - 何时在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的一个非常令人困惑的方面，但是一旦您获得它- super 简单。
考虑您正在编写一个组件，并使用JSX对其进行样式设置:

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)。

关于javascript - 何时在Material UI中使用 'classes'和 'className'？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60522631/