I'm encountering an issue with a menu I created where I can't seem to adjust its height and width properly. It seems to be taking up the full width of the page.
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);
https://i.stack.imgur.com/6iLb7.png
Looking for a solution or alternative component that may work better than the menu. Any suggestions on achieving a menu-like functionality with items?