在 MUI v5 中更改抽屉的颜色
Changing color of Drawer in MUI v5
我在我的项目中使用 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
的背景颜色:
<Drawer
PaperProps={{
sx: {
backgroundColor: "pink"
}
}}
{...}
/>
如果您想将 background-color
设置为黑色,也许您需要深色主题?您可以通过设置 dark mode 将 MUI 主题配置为自动为 Paper
设置深色背景:
const theme = createTheme({
palette: {
mode: "dark"
}
});
<ThemeProvider theme={theme}>
<Content />
</ThemeProvider>
参考
您可以像这样简单地覆盖主题:
const theme = createTheme({
components: {
MuiDrawer: {
styleOverrides: {
paper: {
background: "orange"
}
}
}
}
});
这是一个sandbox
我在我的项目中使用 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
的背景颜色:
<Drawer
PaperProps={{
sx: {
backgroundColor: "pink"
}
}}
{...}
/>
如果您想将 background-color
设置为黑色,也许您需要深色主题?您可以通过设置 dark mode 将 MUI 主题配置为自动为 Paper
设置深色背景:
const theme = createTheme({
palette: {
mode: "dark"
}
});
<ThemeProvider theme={theme}>
<Content />
</ThemeProvider>
参考
您可以像这样简单地覆盖主题:
const theme = createTheme({
components: {
MuiDrawer: {
styleOverrides: {
paper: {
background: "orange"
}
}
}
}
});
这是一个sandbox