Material UI 菜单占据页面的整个宽度

Question

我创建了一个菜单，但我不能改变它的高度和宽度，它的宽度占据整个页面的宽度

import React, { Component } from "react";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";
import EditIcon from "@material-ui/icons/Edit";
import DeleteIcon from "@material-ui/icons/Delete";
import IconButton from "@material-ui/core/IconButton";
import withStyles from "@material-ui/core/styles/withStyles";

const styles = theme => ({
  menu: {
    marginLeft: "-8.8%",
    width: "180px",
    height: "30",
    backgroundColor: "red"
  },
  mainmenu: {
    width: "180px",
    height: "30"
  }
});

class BlogOptions extends Component {
  render() {
    const { anchorEl, handleClose, classes } = this.props;
        return (
      <div className={classes.menu}>
        <Menu
          id="simple-menu"
          anchorEl={anchorEl}
          open={Boolean(anchorEl)}
          onClose={handleClose}
          className={classes.mainMenu}
        >
          <MenuItem onClick={handleClose} className={classes.menuItem}>
            <IconButton>
              <EditIcon />
              Edit
            </IconButton>
          </MenuItem>
          <MenuItem onClick={handleClose}>
            <IconButton>
              <DeleteIcon />
              Delete
            </IconButton>
          </MenuItem>
        </Menu>
      </div>
    );
  }
}

export default withStyles(styles)(BlogOptions);

有没有比菜单更好的修复或任何其他组件？ 我怎样才能实现像带有项目的菜单之类的东西？

Answer 1

您必须指定高度单位

height: "30",