Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Material UI remove Menu padding

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"
/>
like image 935
Arttu Avatar asked May 12 '26 11:05

Arttu


1 Answers

use MenuListProps:

<Menu
    className={classes.menuSearchContainer}
    PaperProps={{
        style: {
            backgroundColor: "#fff",
            width: "270px",
        },
    }}
    MenuListProps={{ sx: { py: 0 } }}
>
<Input
    className={classes.menuSearchInput}
    type="text"
/>
like image 81
ItayMaoz Avatar answered May 15 '26 02:05

ItayMaoz



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!