Soy nuevo en Material-UI y comencé a jugar con su barra de aplicaciones con el ejemplo de menú . Al alternar el menú desplegable, se abre sobre la propia barra de aplicaciones, mientras que me gustaría que se abriera debajo de la barra de navegación.
De los documentos, entiendo que esto se puede hacer con anchorEl como se explica aquí . Pero cuando implemento esto en mi componente de menu , no sucede nada. ¿Cuál es "la forma correcta de interfaz de usuario de material" para encargarse de esto?
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> ); } }Tuve un problema similar y la forma en que lo hice funcionar fue configurando las propiedades en el menú de esta manera:
<Menu id="menu-appbar" anchorEl={anchorEl} getContentAnchorEl={null} anchorOrigin={{ vertical: "bottom", horizontal: "center" }} transformOrigin={{ vertical: "top", horizontal: "center" }} open={open} onClose={this.handleClose} className={props.classes.menu} > Tuve que poner getContentAnchorEl={null} para que las propiedades verticales funcionaran, lo que finalmente aprendí de este problema https://github.com/mui-org/material-ui/issues/7961 .
No estoy seguro de cómo hacer esto cuando se usa el estado para establecer las propiedades del elemento ancla, pero tal vez esto lo ayude a comenzar.
Esta fue mi solución, espero que esto ayude a alguien.
<Menu open={this.state.openProps} anchorEl={this.state.anchorEl} onClose={onClose} className={classes.styles} disableAutoFocusItem PaperProps={{ style: { left: '50%', transform: 'translateX(-77%) translateY(32%)', } }} MenuListProps={{ style: { padding: 0, }, }} >Hay un error en la respuesta de Matheus, el tipo de anclaEl no es booleano, en ReactHooks tendría que ser:
const [menuOpen, setMenuOpen] = useState<boolean>(false); const [anchorEl, setAnchorEl] = useState() const recordButtonPosition = (event: any) => { setAnchorEl(event.currentTarget); setMenuOpen(true); } let closeMenu = () => { setMenuOpen(false); } return ( <React.Fragment> <Button onClick={recordButtonPosition}> OPEN MENU </Button> <Menu anchorEl={anchorEl} open={menuOpen} onClose={closeMenu}> <MenuItem onClick={closeMenu}> ExampleMenuItem </MenuItem> </Menu> </React.Fragment> );