在 Material-UI React 中更改抽屜的顏色

Question

我想更改我的 MUI 抽屜的背景顏色。 這是我的 header 代碼：

import { AppBar, Toolbar, Typography, makeStyles, Button, IconButton, Drawer, Link, MenuItem } from "@material-ui/core";
import React, { useEffect, useState } from "react";
import { Link as RouterLink } from "react-router-dom";
import MenuIcon from "@material-ui/icons/Menu";
import logo from "./Icon.png";

const useStyles = makeStyles (() => ({
    header: {
        backgroundColor: "#1b1b1b",
        paddingRight: "0px",
        paddingLeft: "18px",
        "@media (max-width: 900px)": {
            paddingLeft: 0,
        },
    },
    menuButton: {
        fontFamily: "Inter, sans-serif",
        fontWeight: 700,
        size: "18px",
        marginLeft: "38px",
    },
    toolbar: {
        display: "flex",
        justifyContent: "space-between",
    },
    drawerContainer: {
        padding: "20px 30px",
        color: "inherit",
    },
}));

const headersData = [
    {
        label: "Featured",
        href: "/featured",
    },
    {
        label: "Favorites",
        href: "/favorites",
    },
    {
        label: "My Account",
        href: "/account",
    },
    {
        label: "Discord",
        href: "/discord",
    }
];

export default function Header() {
    const [state, setState] = useState({
        mobileView: false,
        drawerOpen: false
    });

    const { mobileView, drawerOpen } = state;

    useEffect(() => {
        const setResponsivness = () => {
            return window.innerWidth < 900
            ? setState((prevState) => ({ ...prevState, mobileView: true }))
            : setState((prevState) => ({ ...prevState, mobileView: false, drawerOpen: false }));
        };

        setResponsivness();
        window.addEventListener("resize", () => setResponsivness());

        return () => {
            window.removeEventListener("resize", () => setResponsivness());
        }
    }, []);

    const { header, menuButton, toolbar, drawerContainer } = useStyles();
    const displayDesktop = () => {
        return (
            <Toolbar className={toolbar}>
                <a href="/">{smomodsLogo}</a>
                <div>{getMenuButtons()}</div>
            </Toolbar>
        )
    };

    const getDrawerChoices = () => {
        return headersData.map(({ label, href }) => {
            return (
                <Link
                    {...{
                        component: RouterLink,
                        to: href,
                        color: "inherit",
                        style: { textDecoration: "none" },
                        key: label,
                    }}
                >
                    <MenuItem>{label}</MenuItem>
                </Link>
            )
        })
    }

    const displayMobile = () => {
        const handleDrawerOpen = () =>
            setState((prevState) => ({ ...prevState, drawerOpen: true }));
        const handleDrawerClose = () =>
            setState((prevState) => ({ ...prevState, drawerOpen: false }));
        return (
            <Toolbar>
                <IconButton
                    {...{
                        edge: "start",
                        color: "inherit",
                        "aria-label": "menu",
                        "aria-haspopup": "true",
                        onClick: handleDrawerOpen,
                    }}
                >
                    <MenuIcon/>
                </IconButton>
                <Drawer
                    {...{
                        anchor: "left",
                        open: drawerOpen,
                        onClose: handleDrawerClose,
                    }}
                >
                    <div className={drawerContainer}>{getDrawerChoices()}</div>
                </Drawer>
                <div><a href="/">{smomodsLogo}</a></div>
            </Toolbar>
        )
    }

    const smomodsLogo = (
        <Typography variant="h6" component="h1">
            <img src={logo} alt="SMOMods" width={224} height={70}/>
        </Typography>
    )

    const getMenuButtons = () => {
        return headersData.map(({ label, href }) => {
            return (
                <Button
                    {...{
                        key: label,
                        color: "inherit",
                        to: href,
                        component: RouterLink,
                        className: menuButton
                    }}
                >
                    {label}
                </Button>
            );
        });
    };

    return (
        <header>
            <AppBar className={header}>{mobileView ? displayMobile() : displayDesktop()}</AppBar>
        </header>
    );
}

抽屜使用ReactJS中的Material-UI。 我對 React 很陌生，這是我第一次使用它。 我之前在代碼中添加了類似BackgroundColor: "#1b1b1b"的內容，但它只改變了按鈕后面的背景顏色，而不是整個抽屜！

Answer 1

在抽屜選項卡下有文檔。

https://mui.com/api/drawer/

還有另一種方法是通過檢查該元素來覆蓋原始 class ，或者在抽屜上方創建一個，然后像孩子一樣更改顏色。

Answer 2

我分叉了您的示例並應用了我之前通過評論建議您的問題的更改，在這里您的代碼使用抽屜的紅色背景。

我為使其工作而引入的更改都在 Header.js 文件中：

• 在第 17 行的 makeStyles 調用中添加了名為 paper 的新樣式
• 改變了const { header, menuButton, toolbar, drawerContainer } = useStyles(); 通過const { paper, header, menuButton, toolbar, drawerContainer } = useStyles();
• 將 classes={{ paper }} 添加到 Drawer 實例

您可以改進的一些額外的事情：

使用組件時不需要解構：

        <Drawer
          classes={{ paper }}
          {...{
            anchor: "left",
            open: drawerOpen,
            onClose: handleDrawerClose
          }}
        >
          <div className={drawerContainer}>{getDrawerChoices()}</div>
        </Drawer>

通常是這樣寫的：

        <Drawer
          classes={{ paper }}
          anchor="left"
          open={drawerOpen}
          onClose={handleDrawerClose}
        >
          <div className={drawerContainer}>{getDrawerChoices()}</div>
        </Drawer>

代替：

  return (
    <header>
      <AppBar className={header}>
        {mobileView ? displayMobile() : displayDesktop()}
      </AppBar>
    </header>
  );

你應該做：

  return (
    <AppBar className={header}>
      {mobileView ? displayMobile() : displayDesktop()}
    </AppBar>
  );