我在 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",
},
},
}
}
请大家帮忙
直接在
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
我正在 Udemy 上做同样的课程,并且我找到了另一种方法来使用父菜单组件 sx-prop 来定位您正在设计样式的嵌套组件,而不是像第一个答案中那样使用 MenuListProp 属性的嵌套 sx-prop 。
在弄清楚这个之前,我确实使用了第一个答案: