需要帮助样式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类的默认填充，并在自己中重新添加间距，例如https://codesandbox.io/s/z6q4z54njp