如何覆盖材质ui组件中的特定样式答案

【问题标题】：How to overwrite specific style in material ui component如何覆盖材质ui组件中的特定样式
【发布时间】：2020-02-26 12:22:49
【问题描述】：

我正在使用 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>

但运气不好，有什么想法吗？

【问题讨论】：

我认为你必须创建一个 HOC 并覆盖那里的样式
为此，您需要在菜单中添加类属性。像这样 classes={{ list: "menu-list"}} 然后将填充零应用于菜单列表。
@RajPurohit 你能为我的具体情况写一个解决方案吗？我已经阅读了很多这样的解决方案，但我不理解它们。
请查看此代码笔示例codesandbox.io/s/material-demo-jzjy1
@RajPurohit 感谢您的帮助，但 codepen 不起作用，我尝试按照您指定的方式添加 CSS 类，但它不起作用 =\

标签： reactjs material-ui

【解决方案1】：

使用makeStyles 为MuiList-Padding 定义新样式，然后使用useStyles 钩子和MuiListProps 属性覆盖该样式：

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';
import { makeStyles } from "@material-ui/core/styles";


const useStyles = makeStyles(theme => ({
  padding: {
    paddingTop: "30px",
    paddingBottom: "30px"
  }
}));

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

  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={{
          classes: {padding: classes.padding},
        }}
      >
        <MenuItem onClick={handleClose}>Profile</MenuItem>
        <MenuItem onClick={handleClose}>My account</MenuItem>
        <MenuItem onClick={handleClose}>Logout</MenuItem>
      </Menu>
    </div>
  );
}

你可以检查Code Sandbox link是否工作

注意：此答案适用于 material-ui V4

【讨论】：

emm 它不适用于我的具体情况，但谢谢
@AlexK 检查我的更新答案，我将其更改为使用菜单而不是列表

【解决方案2】：

List 有一个 disablePadding 属性 (https://material-ui.com/api/list/#props)。

您可以通过MenuListProps 为Menu 设置此项，如下所示：

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>
  );
}