如何在material-ui中更改菜单的颜色 [英] How to change the color of Menu in material-ui
问题描述
我正在使用 material-ui
中的菜单,并且想要更改背景颜色.问题是,当我给Menu赋颜色时,它会在出现菜单弹出窗口时更改整个页面的背景.当我为菜单项应用颜色时,由于所有这些菜单项都包含在div中,因此顶部和底部会留下一些灰色阴影.问题沙箱:
您可以检查DOM结构以找出应该使用哪个元素的className
< divclass="MuiPaper-root MuiMenu-paper MuiPopover-paper MuiPaper-elevation8 MuiPaper-rounded"tabindex =-1"style="opacity: 1; transform: none; transition: opacity 251ms cube-bezier(0.4, 0, 0.2, 1) 0ms, transform 167ms cube-bezier(0.4, 0, 0.2, 1) 0ms; top: 16px; left:16像素;转换来源:-8像素10像素;">< ul>< li/>< li/>< li/></ul></div> ;;
在这里, MuiPaper-root
似乎是第一个.因此,使用它会很好.
I am using Menu from material-ui
and want to change the background color. Problem is, when I give color to Menu, it changes the whole page background when the menu popper appears. And when I apply color to Menu Items, it leaves some grey shades at the top and bottom, because all these menu Items are enclosed inside a div.
Problem Sandbox: https://codesandbox.io/s/material-ui-dropdown-background-color-g88e1
What's the right way to change Menu's background color?
I tried createMuiTheme
for changing this, but it changes the color of all the Menus in my application. I want to apply this style to only one of the Menu Items. So looking for a solution to do this using makeStyle
There are multiple ways
1.Material-UI Menu CSS API
we have the API called paper
Global class:
.MuiMenu-paper
Description: Styles applied to the Paper component.
<Menu
...
classes={{ paper: classes.menuPaper }}
>
export const useStyles = makeStyles((theme: Theme) => ({
menuPaper: {
backgroundColor: "lightblue"
}
}));
2.Use Material-UI nesting selector to directly select the MuiPaper-root
An optional way for some cases when there is no related CSS API exposed.
<Menu
...
className={classes.menu}
>
export const useStyles = makeStyles((theme: Theme) => ({
menu: {
"& .MuiPaper-root": {
backgroundColor: "lightblue"
}
}
}));
You can check the DOM structure to find out which element's className should you use
<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>;
Here the MuiPaper-root
appears to be the first. So use it would be fine.
这篇关于如何在material-ui中更改菜单的颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!