javascript - Customize menu item of material ui

Question

(Closed). This question needs details or clarity. It is not currently accepting answers. question from:https://stackoverflow.com/questions/66065879/customize-menu-item-of-material-ui

Answer 1

that padding is coming from the .MuiList-padding which is the default padding in the Menu. Use the MenuProps prop to pass the props down to Menu. Then target the list class using classes property.

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

Here is the working demo: