如何覆盖material ui组件中的特定样式

Question

我正在使用 MUI 中的组件，当我使用开发工具时，我可以看到它具有这些样式：

.MuiList-padding {
    padding-top: 8px;
    padding-bottom: 8px;
}

我想删除填充，但我无法让它工作，我尝试过

  <Menu
        id="simple-menu"
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={closeMenu}
        styles={{MuiList:{{padding:none}}}} 
      >
        <somecomponent/>
      </Menu>

但没有运气，有什么想法吗？

Answer 1

List有一个disablePadding道具（https://material-ui.com/api/list/#props）。

您可以将其设置为Menuvia MenuListProps，如下所示：

import React from "react";
import Button from "@material-ui/core/Button";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";

export default function SimpleMenu() {
  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleClick = event => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <div>
      <Button
        aria-controls="simple-menu"
        aria-haspopup="true"
        onClick={handleClick}
      >
        Open Menu
      </Button>
      <Menu
        id="simple-menu"
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}
        MenuListProps={{
          disablePadding: true
        }}
      >
        <MenuItem onClick={handleClose}>Profile</MenuItem>
        <MenuItem onClick={handleClose}>My account</MenuItem>
        <MenuItem onClick={handleClose}>Logout</MenuItem>
      </Menu>
    </div>
  );
}

相关回答：

• Material UI api 文档已经过时了吗？
• 从materialui组件中删除/覆盖默认样式