Question

有什么办法可以去掉 Menu 组件的上下内边距吗？

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

如果有帮助，这里是代码：

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

Answer 1

从 list classes 属性中定位 Menu 类。

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

和 useStlyes 将是：


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

结帐Codesandbox demo

Answer 2

试试这个

<MenuItem dense=true />

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

这可能是问题所在。

材质 UI 移除菜单填充

2 个答案: