Material UI remove Menu padding

Arttu

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"
/>
Rajiv

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related