自定义材质ui的菜单项[关闭]答案

【问题标题】：Customize menu item of material ui [closed]自定义材质ui的菜单项[关闭]
【发布时间】：2021-02-05 15:19:40
【问题描述】：

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

在here中查找样本

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

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

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

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

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

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

【问题讨论】：

请发布您的代码。
在菜单列表中，你可以看到顶部和底部有一个填充，要么我需要删除那个，要么需要改变整个纸根的颜色。

标签： javascript html css reactjs material-ui

【解决方案1】：

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

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

这是工作演示：

【讨论】：