Question

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

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

<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

className等于React中的class（如HTML）。因为我们在.js文件中编写Everting，所以class是保留关键字，因此React的创建者将其称为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>
  )
}

React编译代码时，它将了解您使用的是哪种样式，因为您传递了包含样式的classes.bannerBackground对象。

为什么同时使用className和classes

1 个答案: