在React中使用“类”支柱时的混淆

Question

我正在学习反应和MUI。我试图按照给定的这里步骤创建一个侧栏。指南使用与makeStyles不兼容的React18。所以，我尝试了以下几种方法：

    import * as React from "react";
    import Box from "@mui/material/Box";
    import CssBaseline from "@mui/material/CssBaseline";
    import Drawer from "@mui/material/Drawer";
    import Typography from "@mui/material/Typography";
    import { useTheme } from "@mui/material/styles";
    
    const drawerWidth = 240;
    
    const SideBar = () => {
      const theme = useTheme();
    
      const drawerPaper = {
        position: "relative",
        backgroundColor: "#535454",
        color: "#fff",
        whiteSpace: "nowrap",
        paddingTop: theme.spacing(4),
        paddingBottom: theme.spacing(4),
        width: drawerWidth,
      };
    
    return (
        <Box className="root">
          <CssBaseline />
          <Drawer variant="permanent" classes={{ paper: drawerPaper }}>
            <Typography>I am a SideBar</Typography>
          </Drawer>
        </Box>
      );
    };
    
    export default SideBar;

这不管用。css没有出现。有人能告诉我怎么做吗？我也找不到很多关于如何使用道具类的文档。与文件的链接也会有所帮助。

编辑：

我已经按照@Ippizinidev和@Hamed的建议尝试使用sx。那不管用。使用sx，我得到了这结果。但我想要像这这样的东西。在第二个例子中，我将css放在一个单独的.css文件中。但我不能从这种方法中使用useTheme。

Answer 1

不用使用makeStyles()，您可以使用useStyles()。

有关如何使用此方法，请参见这个问题。

但在您的情况下，最好使用sx属性。所以你的代码是：

<Drawer variant="permanent" sx={drawerPaper}>
  <Typography>I am a SideBar</Typography>
</Drawer>