[英]Material Ui menu taking full width of the page
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?
我怎样才能实现像带有项目的菜单之类的东西?
您必须指定高度单位
height: "30",
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.