Soy nuevo en reactjs. Mi problema es que quiero que el menú desaparezca si el mouse sale de esa área, así que probé onMouseOut y onMouseLeave para cerrar el menú, pero parece que cuando esta opción está allí, ¡el menú nunca se abre! Pero cuando onMouseOver o Leave, funciona bien, pero permanece allí si no hace clic en algo. MenuListProps={{ onMouseLeave: handleClose }}

Eso sucede porque cuando abro el menú, se coloca un diseño modal en toda la página, lo que significa que el evento onMouseLeave se activará inmediatamente después de onMouseEnter . pero para que funcione debo cambiar el ancla del menú para que cubra el botón en su totalidad

 <div> {menuItem.map((text) => ( <Button onClick={(e) => handleChangeMenu(text, e)} onMouseOver={(e) => handleHover(text, e)}> {text} </Button> ))} <Menu transitionDuration={700} anchorEl={project} open={Boolean(project)} onClose={() => { setproject(null); }} MenuListProps={{ onMouseLeave: () => { setproject(null); }, }} > {mySubMenu.map((text) => ( <MenuItem sx={menuItemStyle}>{text}</MenuItem> ))} </Menu> </div>