需要帮助设计 MaterialUI MenuItem 组件

Question

我正在尝试使用 MaterialUI 框架来设置菜单项的样式，但感觉很迷茫。

这是我的目标：

而且，到目前为止，这是我得到的：https://codesandbox.io/s/542wvq4mxl

如有任何帮助，我们将不胜感激。

Answer 1

将您的风格更改为关注。

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"
  }
});

Answer 2

我看到的问题是 MenuItem 组件应用了 padding。但是你想要做的是让图标的橙色背景拉伸整个高度而忽略这个填充（或者，让文本和箭头的白色背景做同样的事情）。可能有 css 方法可以做到这一点，但我不知道。

所以我会尝试删除 menuItem class 上的默认填充，然后自己添加间距，例如 https://codesandbox.io/s/z6q4z54njp

需要帮助设计 MaterialUI MenuItem 组件

Need help styling MaterialUI MenuItem Component

reactjs

material-ui

css-in-js