Материал 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);

is Есть ли какое-либо исправление или любой другой компонент, который может быть лучше, чем меню? Как я могу получить что-то вроде меню с пунктами?

Answer 1

Вы должны указать единицу измерения высоты

height: "30",