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

Posted 2023-04-13

【中文标题】更改抽屉中的背景颜色 - MUI

【英文标题】：changing background color in drawer - MUI

【发布时间】：2021-12-22 22:00:47

【问题描述】：

我无法更改 Drawer 组件中的 backgroundColor。我按照我在其他裁判中发现的那样做，但它对我不起作用。我创建了两个类

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>
               
            </>
    )

感谢您的回答！

【参考方案1】：

您没有以正确的方式通过课程。 classes 属性需要一个 object 和 keys 包含来自 makeStyle 钩子的类名。正确的语法应该是这样的

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

更新后的代码可能是

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>
    </>
  );

注意：添加&&是为了增加对论文应用样式的specificity。

另外，makeStyles 的支持将在未来某个时候成为legacy 解决方案。如果可能的话，你应该看看 mui v5 中提供的newer styling option。

【讨论】：

非常感谢！非常感谢你！ “由于上述原因，只有 Box、Stack、Typography 和 Grid 组件接受系统属性作为 props。这些组件旨在解决 CSS 问题，它们是 CSS 组件实用程序。”不幸的是，这个不错的方法在 AppBar、Drawer 等组件中不起作用。