Material ui 为什么同时使用类名和类

请原谅我可能很简单的问题：-）

只是想知道为什么示例使用className和classes，例如：

<Drawer
        variant="permanent"
        className={clsx(classes.drawer, {
          [classes.drawerOpen]: open,
          [classes.drawerClose]: !open,
        })}
        classes={{
          paper: clsx({
            [classes.drawerOpen]: open,
            [classes.drawerClose]: !open,
          }),
        }}
        open={open}
      >

提前感谢您的帮助

---

Cheers

className

等于React中的

class

（如HTML中所示）。因为我们在.js文件中编写everting，class是一个保留关键字，所以React的创建者将其命名为

className

classes

是包含样式的对象。 您定义类如下所示。 榜样

//Banner.js
从“React”导入React
从“@material ui/core/styles”导入{makeStyles}
从“@material ui/core/”导入{Box，Button}”
const useStyles=makeStyles({
横幅背景：{
宽度：“100%”，
身高：300，
背景颜色：“绿色”
}
})
导出默认函数标题（）{
常量类=useStyles（）
返回(
立项
)
}

---

当React编译您的代码时，它将了解您使用的样式，因为您传递了

类。bannerBackground

对象，其中包含您的样式。

感谢您的回复，只是想知道为什么示例同时使用这两种样式，我可以使用className或classes吗，就像你的例子一样？如果你像这样使用它，那么它应该工作得很好。

// Banner.js
import React from 'react'
import { makeStyles } from '@material-ui/core/styles'
import { Box, Button } from '@material-ui/core/'

const useStyles = makeStyles({
  bannerBackground: {
    width: "100%",
    height: 300,
    backgroundColor: "green"
  }
})
export default function Banner() {
  const classes = useStyles()

  return (
    <Box className={classes.bannerBackground}>
      <Button variant='contained' color='primary'>
        Start a project
      </Button>
    </Box>
  )
}