更改抽屉中的背景颜色 - MUI

Question

i cannot change backgroundColor in Drawer component. I do as I found in other refs and it is not working for me. I created two classes

import { makeStyles } from '@mui/styles'
import { Drawer, Typography } from '@mui/material';


const drawerWidth = 240;
const useStyles = makeStyles({
    drawer: {
        width: drawerWidth,    
      },
      drawerPaper: {
        width: drawerWidth,
        backgroundColor: "#fcba03" 
      },
  });

export default function Sidebar() {
  const classes=useStyles()
    return (   
           <>
            <Drawer
                className={classes.drawer}
                variant="permanent"
                anchor="left"
                 classes={{paper: classes.drawerPaper},
                 {root:classes.drawerRoot}}               
            >
                <div>
                    <Typography variant='h5'> Home </Typography>
                </div>

            </Drawer>
               
            </>
    )
}

thanks for answer!

Answer 1

You're not passing the classes in correct way. The classes prop expects an object with keys containing the class names from makeStyle hook. The correct syntax should be like

classes={{ paper: classes.drawerPaper, root: classes.drawerRoot }}

The updated code could be

import { makeStyles } from "@mui/styles";
import { Drawer, Typography } from "@mui/material";

const drawerWidth = 240;
const useStyles = makeStyles({
  drawer: {
    width: drawerWidth
  },
  drawerPaper: {
    "&&": {
      width: drawerWidth,
      backgroundColor: "#fcba03"
    }
  }
});

export default function Sidebar() {
  const classes = useStyles();
  return (
    <>
      <Drawer
        className={classes.drawer}
        variant="permanent"
        anchor="left"
        classes={{ paper: classes.drawerPaper, root: classes.drawerRoot }}
      >
        <div>
          <Typography variant="h5"> Home </Typography>
        </div>
      </Drawer>
    </>
  );
}

Note: && is added to increase the specificity of the applied styles to the paper.

Also, the support of makeStyles is going to be a legacy solution at sometime in future. If possible, you should probably look at the newer styling option provided in the mui v5.