自定义材质ui的菜单项

Question

我有一个材质 ui 的 <select> 元素，我在其中循环了 menuItem 元素。

在here中查找样本

我尝试更改每个菜单项的背景颜色，但顶部和底部仍然有填充。要么我需要删除填充，要么我需要更改整个列表的背景颜色。

我想要实现的是改变生成的 muiPaper-root 类的颜色。

由于这不在根 DOM 节点中，我无法覆盖 css。

我尝试使用自定义类，但它只能应用于 menuItem，它是父级 paperroot 的子级。

在代码中，menuItem 是根 DOM 节点中的 select 的直接子节点。

非常感谢任何帮助。 提前致谢。

Answer 1

该填充来自 .MuiList-padding，它是 Menu 中的默认填充。使用 MenuProps 道具将道具向下传递给 Menu。然后使用 list 属性定位 classes 类。

<Select
  MenuProps={{ classes: { list: classes.list } }}
  id="demo-simple-select-outlined"
  value={selectedOne}>
  {myList.map((ele, index) => (
    <MenuItem key={ele} value={ele} style={{ background: "grey" }}>
      {ele}
    </MenuItem>
  ))}
</Select>

const useStyles = makeStyles((theme) => ({
  list:{
    padding:0
  }
}));

这是工作演示：