Я новичок в Material-UI и только начал возиться со своей панелью приложений с примером меню. При переключении выпадающего меню оно открывается поверх самой панели приложений, а я бы хотел, чтобы оно открывалось под панелью навигации.
Из документов я понимаю, что это можно сделать с помощью Anchor EL
как описано здесь. Но когда я реализую это в моем компоненте menu
ничего не происходит. Каков "правильный способ материала-интерфейса", чтобы позаботиться об этом?
class Header extends React.Component {
state = {
auth: true,
anchorEl: null,
anchorOriginVertical: 'bottom',
anchorOriginHorizontal: 'right',
transformOriginVertical: 'top',
transformOriginHorizontal: 'right',
anchorReference: 'anchorEl',
};
handleChange = (event, checked) => {
this.setState({ auth: checked });
};
handleMenu = event => {
this.setState({ anchorEl: event.currentTarget });
};
handleClose = () => {
this.setState({ anchorEl: null });
};
render() {
const { classes } = this.props;
const { auth, anchorEl } = this.state;
const open = Boolean(anchorEl);
return (
<div className={classes.root}>
<AppBar position="static">
<Toolbar>
<Typography type="title" color="inherit" className={classes.flex}>
Title
</Typography>
{auth && (
<div>
<IconButton
aria-owns={open ? 'menu-appbar' : null}
aria-haspopup="true"
onClick={this.handleMenu}
color="contrast"
>
<AccountCircle />
</IconButton>
<Menu
id="menu-appbar"
anchorEl={anchorEl}
open={open}
onClose={this.handleClose}
>
<MenuItem onClick={this.handleClose}>Profile</MenuItem>
<MenuItem onClick={this.handleClose}>My account</MenuItem>
</Menu>
</div>
)}
</Toolbar>
</AppBar>
</div>
);
}
}