Как переписать указанный стиль c в пользовательском интерфейсе материала

Question

Я использую компонент из MUI, когда я использую инструменты разработчика, я вижу, что у него есть эти стили:

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

I wi sh, чтобы удалить заполнение, но я не могу его получить на работу я пробовал

  <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).

Вы можете установить это значение для Menu через 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>
  );
}

Ответы по теме:

• Материал интерфейса пользователя API устарел?
• Удалить / переопределить стили по умолчанию из компонентов materialui

Answer 2

Используйте makeStyles для определения нового стиля для MuiList-Padding, а затем используйте useStyles hook и MuiListProps prop для переопределения этого стиля:

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

Вы можете проверить, что работает Код песочницы ссылка

---

Примечание: этот ответ работает для материала-пользовательского интерфейса V4