Material Ui menu taking full width of the page

Question

I have created a menu but i can't change its height and width and its width taking full page width

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 there any fix or any other component which can be better than menu? How can i achieve something like menu with items?

Answer 1

您必须指定高度单位

height: "30",