我正在尝试使用 MaterialUI 框架设置菜单项的样式,但感觉很迷茫。
这就是我想要的:
而且,到目前为止,这就是我所拥有的:https ://codesandbox.io/s/542wvq4mxl
任何帮助将不胜感激。
我正在尝试使用 MaterialUI 框架设置菜单项的样式,但感觉很迷茫。
这就是我想要的:
而且,到目前为止,这就是我所拥有的:https ://codesandbox.io/s/542wvq4mxl
任何帮助将不胜感激。
我看到的问题是该MenuItem
组件已padding
应用。但是您要做的是让图标的橙色背景拉伸整个高度,忽略此填充(或者,让文本和箭头的白色背景也这样做)。可能有一种 css 方法可以做到这一点,但我不知道。
因此,我会尝试删除您menuItem
班级的默认填充并自己添加间距,例如https://codesandbox.io/s/z6q4z54njp
改变你的风格跟随。
const styles = theme => ({
menuItem: {
backgroundColor: "#fff",
height: "50px",
fontSize: "50px"
},
primary: {
height: "100%",
backgroundColor: "#fff",
fontSize: "30px"
},
icon: {
fill: "#ffff",
backgroundColor: "#ff6b30",
width: "70px",
height: "70px"
}
});