Material UI remove Menu padding

user_12158627 0
Viewed 2790

Is there any way to remove top and bottom padding from Menu component?

Tried to set padding to 0 in PaperProps and also in makeStyles but when I inspect the element on browser it still shows 8px default padding on top and bottom.

Here's the code if it helps:

<Menu
    className={classes.menuSearchContainer}
    PaperProps={{
        style: {
            backgroundColor: "#fff",
            width: "270px",
            paddingTop: '0px',
        },
    }}
>
<Input
    className={classes.menuSearchInput}
    type="text"
/>
material-ui reactjs
2 Answers

target the list class from Menu classes prop.

<Menu
  {...other props}
  classes={{list:classes.list}}
>
  {...meuItem}
</Menu>

and useStlyes will be:


const useStyles = makeStyles(() =>
  createStyles({
    list:{
      padding:'0'
    }
  }),
);

Checkout a Codesandbox demo

user_112222820

Try this

<MenuItem dense=true />

From Materiul-UI dense : If true, compact vertical padding designed for keyboard and mouse input will be used.

This might be the issue.

user_135954170
Related