Material-UI v5 菜单组件样式未应用

Question

我在 Material-UI v5 中设置菜单组件样式时遇到问题。

我有这个用户界面：

    <Menu
      defaultValue={undefined}
      id="simple-menu"
      open={openMenu}
      onClose={onCloseHandler}
      anchorEl={anchorEl}
      MenuListProps={{ onMouseLeave: onCloseHandler }}
      elevation={0}
      sx={{ color: "white", backgroundColor: "blue" }}
    >

当我使用此代码时，所有 UI 都会变成蓝色：

之后我尝试将全局样式覆盖应用到菜单的纸张上，但没有任何反应。风格没有改变：

    components: {
        MuiMenu: {
          styleOverrides: {
            paper: {
              backgroundColor: arcBlue,
              color: arcBlue,
              borderRadius: "0px",
            },
          },
        }
    }

请大家帮忙

Answer 1

直接在

sx

组件上传递

Menu

会将样式应用于组件的根（这就是导致样式修改应用于覆盖毯的原因）。

在您的情况下，由于您尝试仅设置菜单的 MUI 列表部分的样式，因此您希望使用

sx

属性将 MenuListProps 属性直接传递到

underlying

列表组件。例如：

<Menu
  id="basic-menu"
  anchorEl={anchorEl}
  open={open}
  onClose={handleClose}
  MenuListProps={{
    sx: { backgroundColor: "blue" }
  }}
>

产生：

工作 CodeSandbox：https://codesandbox.io/s/twilight-glitter-cj83rc?file=/demo.tsx:758-951

Answer 2

我正在 Udemy 上做同样的课程，并且我找到了另一种方法来使用父菜单组件 sx-prop 来定位您正在设计样式的嵌套组件，而不是像第一个答案中那样使用 MenuListProp 属性的嵌套 sx-prop 。

在弄清楚这个之前，我确实使用了第一个答案：

• 文档中的示例可以在标题为“覆盖嵌套组件样式”的部分中找到 链接：https://mui.com/material-ui/customization/how-to-customize/#the-sx-prop

这是我的代码中的样子：

这是样式化的纸张在浏览器中的样子：