Javascript “材料”Ui菜单占据整个页面的宽度

我已经创建了一个菜单，但是我不能改变它的高度和宽度，也不能改变它的宽度

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

import React，{Component}来自“React”；
从“@material ui/core/Menu”导入菜单；
从“@material ui/core/MenuItem”导入菜单项；
从“@material ui/icons/Edit”导入编辑图标；
从“@material ui/icons/Delete”导入DeleteIcon；
从“@material ui/core/IconButton”导入图标按钮；
从“@material ui/core/styles/withStyles”导入withStyles；
常量样式=主题=>({
菜单：{
保证金余额：“-8.8%”，
宽度：“180px”，
身高：“30”，
背景颜色：“红色”
},
主菜单：{
宽度：“180px”，
高度：“30”
}
});
类BlogOptions扩展组件{
render（）{
const{anchorEl，handleClose，classes}=this.props；
返回(
编辑
删除
);
}
}
导出默认样式（样式）（BlogOptions）；

有没有比菜单更好的补丁或其他组件？

---

如何实现菜单中的项目？

必须指定高度单位

height: "30",