为什么同时使用className和类

Question

请原谅我可能很简单的问题:-)

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

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

提前感谢您的帮助。

干杯

Answer 1

在React中，className等于class(就像在HTML中一样)。因为我们在.js文件中编写className，class是一个保留关键字，所以React的创建者将其命名为class。

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

当React编译你的代码时，它会知道你使用的是哪种样式，因为你传递了包含你的样式的classes.bannerBackground对象。