Confusion in using the "classes" prop in React MaterialUI

Ashutosh Chapagain 0
Viewed 35

I am learning React and MUI. I was trying to follow the steps given here to create a sidebar. The guide uses makeStyles which is not compatible with React18. So, I tried something like the following:


    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;

This does not work. The css does not show up. Can someone tell me how I can do it? I also couldn't find much documentation on how to use the classes prop. A link to the documentation would also be helpful.

Edit:

I have already tried using sx as suggested by @Ippizinidev and @Hamed Siaban. That doesn't work. Using sx, I get the this result. But I want something like this. In the second example, I have put the css in a separate .css file. But I can't use useTheme from this approach.

material-ui reactjs
1 Answers

Instead of using makeStyles(), You can use useStyles().
See this question for how to use this approach.

But in your case it's better if You use sx property. So your code would be:

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