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

问题描述 投票:0回答:2

我在 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",
            },
          },
        }
    }

请大家帮忙

reactjs material-ui styles
2个回答
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


0
投票

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

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

这是我的代码中的样子:

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

© www.soinside.com 2019 - 2024. All rights reserved.