我正在使用 Menu frommaterial-ui并想更改背景颜色。问题是，当我为菜单赋予颜色时，它会在出现菜单弹出窗口时更改整个页面背景。当我将颜色应用于菜单项时，它会在顶部和底部留下一些灰色阴影，因为所有这些菜单项都包含在一个 div 中。问题沙箱：https : //codesandbox.io/s/material-ui-dropdown-background-color-g88e1
更改菜单背景颜色的正确方法是什么？
我试图createMuiTheme改变这一点，但它改变了我的应用程序中所有菜单的颜色。我只想将此样式应用于其中一个菜单项。所以寻找解决方案来使用makeStyle
有多种方式
我们有名为paper的 API
全局类：
.MuiMenu-paper
描述：应用于 Paper 组件的样式。
<Menu
...
classes={{ paper: classes.menuPaper }}
>
export const useStyles = makeStyles((theme: Theme) => ({
menuPaper: {
backgroundColor: "lightblue"
}
}));
MuiPaper-root在没有公开相关 CSS API 的某些情况下的可选方式。
<Menu
...
className={classes.menu}
>
export const useStyles = makeStyles((theme: Theme) => ({
menu: {
"& .MuiPaper-root": {
backgroundColor: "lightblue"
}
}
}));
您可以检查 DOM 结构以找出您应该使用哪个元素的 className
<div
class="MuiPaper-root MuiMenu-paper MuiPopover-paper MuiPaper-elevation8 MuiPaper-rounded"
tabindex="-1"
style="opacity: 1; transform: none; transition: opacity 251ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 167ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; top: 16px; left: 16px; transform-origin: -8px 10px;"
>
<ul>
<li />
<li />
<li />
</ul>
</div>;
这里MuiPaper-root似乎是第一个。所以用起来就好了。