Changing color of Drawer in MUI v5 - css

Question

I'm using MUI v5 in my project and trying to apply styling to a Drawer so that the background color is black. Since this update was pretty recent I can't find much info on changing the styling of the component without using deprecated elements from MUI v4. Any tips for this? I would also appreciate some advice on applying a color that I've defined using createTheme from MUI as well.
import React from "react";
import {
Divider,
Drawer,
ListItem,
ListItemButton,
ListItemIcon,
ListItemText,
} from "#mui/material";
import AddIcon from "#mui/icons-material/Add";
import SearchIcon from "#mui/icons-material/Search";
import HomeIcon from "#mui/icons-material/Home";
import qdjLogo from "../../assets/qdj_logo.png";
import "./styling/SideBarStyling.css";
import ProfileFooter from "./ProfileFooter";
function Sidebar() {
return (
<div>
<Drawer variant="permanent" anchor="left">
<div className={"wrapper"}>
<a href="">
<img className={"icon"} src={qdjLogo} alt="QDJ Logo" />
</a>
</div>
<ProfileFooter />
</Drawer>
</div>
);
}
export default Sidebar;

Answer 1

You can change the background color of the Drawer by styling the Paper component inside it using the sx prop:
<Drawer
PaperProps={{
sx: {
backgroundColor: "pink"
}
}}
{...}
/>
If you want to set the background-color to black, maybe you want a dark theme? You can configure MUI theme to automatically set the dark background for Paper by setting the dark mode like this:
const theme = createTheme({
palette: {
mode: "dark"
}
});
<ThemeProvider theme={theme}>
<Content />
</ThemeProvider>
Reference
https://mui.com/guides/migration-v4/#migrate-from-jss

Answer 2

You can simply override the theme like this:
const theme = createTheme({
components: {
MuiDrawer: {
styleOverrides: {
paper: {
background: "orange"
}
}
}
}
});
Here is a sandbox