I have been attempting to change the background color of a drawer component in React, but I have only been successful in changing the background behind the drawer or the field with the items. Here is the code I am using:
const useStyles = makeStyles({
MuiDrawer: {
backgroundColor: "#5d001e",
},
list: {
width: 250,
},
linkText: {
textDecoration: `none`,
textTransform: `uppercase`,
color: `black`,
},
})
return (
<>
<React.Fragment>
<TheIconButton
edge="start"
aria-label="menu"
onClick={toggleDrawer("right", true)}>
<Menu />
</TheIconButton>
<Drawer anchor="right" open={state.right} onOpen={toggleDrawer("right", true)} onClose={toggleDrawer("right", false)} className={classes.MuiDrawer}>
{sideDrawerList("right")}
</Drawer>
</React.Fragment>
</>
)
https://i.sstatic.net/ZbzlC.png
Any suggestions on how to target the entire white area? I even attempted using a CSS class to force it but that didn't work...