我在我的元素中使用 MUI v5 并尝试将样式应用到 Drawer
以便背景颜色为黑色。由于此更新是最近的更新,因此我无法找到很多有关在不使用 MUI v4 中已弃用的元素的情况下更改组件样式的信息。对此有什么建议吗?对于应用我使用 MUI 中的 createTheme
定义的颜色的一些建议,我也将不胜感激。
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;
最佳答案
您可以通过使用 sx
设置 Paper
组件的样式来更改 Drawer
的背景颜色 Prop :
<Drawer
PaperProps={{
sx: {
backgroundColor: "pink"
}
}}
{...}
/>
如果你想将 background-color
设置为黑色,也许你想要一个深色主题?您可以通过设置 dark mode 将 MUI 主题配置为自动为 Paper
设置深色背景像这样:
const theme = createTheme({
palette: {
mode: "dark"
}
});
<ThemeProvider theme={theme}>
<Content />
</ThemeProvider>
https://stackoverflow.com/questions/69517179/