为什么backgroundColor应用到了我不想要的地方| MUI 中的菜单组件 |样式组件

我将 mui 中的菜单组件的背景颜色设置为粉红色，这就是我单击时看到的内容dashboard button.

我预计这会为菜单添加背景颜色，但结果页面的一半变成了粉红色。

如何将背景颜色应用于菜单？

import * as React from "react";
import Button from "@mui/material/Button";
import MenuItem from "@mui/material/MenuItem";
import { MenuRaw } from "./styles";

export default function BasicMenu() {
  const [anchorEl, setAnchorEl] = React.useState(null);
  const open = Boolean(anchorEl);
  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };
  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <div>
      <Button
        id="basic-button"
        aria-controls={open ? "basic-menu" : undefined}
        aria-haspopup="true"
        aria-expanded={open ? "true" : undefined}
        onClick={handleClick}
      >
        Dashboard
      </Button>
      <MenuRaw
        id="basic-menu"
        anchorEl={anchorEl}
        open={open}
        onClose={handleClose}
        MenuListProps={{
          "aria-labelledby": "basic-button"
        }}
      >
        <MenuItem onClick={handleClose}>Profile</MenuItem>
        <MenuItem onClick={handleClose}>My account</MenuItem>
        <MenuItem onClick={handleClose}>Logout</MenuItem>
      </MenuRaw>
    </div>
  );
}

import styled from "styled-components";
import Menu from "@mui/material/Menu";

export const MenuRaw = styled(Menu)`
  width: 412px;
  background-color: pink;
`;

您需要指定要更改的菜单元素的类。在这种情况下，您想要覆盖.MuiPaper-root类的Paper成分：

export const MenuRaw = styled(Menu)`
  & .MuiPaper-root {
    background-color: pink;
    width: 412px;
  }
`;