Material UI 删除菜单填充

Question

有什么方法可以从菜单组件中删除顶部和底部填充吗？

尝试在 PaperProps 和 makeStyles 中将填充设置为 0，但是当我在浏览器上检查该元素时，它仍然在顶部和底部显示 8px 默认填充。

这是代码（如果有帮助的话）：

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

Answer 1

从

list

类属性中定位

Menu

类。

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

和

useStlyes

将是：

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

查看 Codesandbox 演示

Answer 2

使用

MenuListProps

：

<Menu
    className={classes.menuSearchContainer}
    PaperProps={{
        style: {
            backgroundColor: "#fff",
            width: "270px",
        },
    }}
    MenuListProps={{ sx: { py: 0 } }}
>
<Input
    className={classes.menuSearchInput}
    type="text"
/>

Answer 3

对于 Mui

v5.15

，只有这个对我有用：

<Menu
    slotProps={{
      root: { sx: { '.MuiList-root': { padding: 0 } } },
    }}
>

或使用

styled

:

const StyledMenu = styled(Menu)({
  '.MuiList-root': { padding: 0 },
});

Answer 4

试试这个

<MenuItem dense=true />

来自Materiul-UI密集：如果为真，将使用专为键盘和鼠标输入设计的紧凑垂直填充。

这可能是问题所在。