Tengo un cuadro de diálogo Material UI que no contiene nada más que texto y un icono con un menú desplegable de opciones. La demostración se puede ver aquí: https://codesandbox.io/s/prod-rain-1rwhf?file=/src/App.js
Estoy tratando de colocar el componente Menu para que aparezca justo debajo del componente Settings cuando se hace clic en él. He especificado una position: relative en el elemento principal (es decir, el icono de Settings ), así como una position: absolute con la top: -10px para el elemento secundario (es decir, el componente Menu ), pero eso no parece funcionar.
¿Cómo puedo configurarlo para que cuando se haga clic en el ícono de Configuración, el Menú aparezca directamente debajo de la Configuración, así como cuando se cambie el tamaño de la ventana para que el Menú siga?
EDITAR :
En caso de que haya algún problema para abrir los códigos y la caja, esto es lo que tengo.
aplicación.js :
import "./styles.css"; import { useState } from "react"; import { Dialog, DialogActions, DialogContent, DialogTitle, Divider, ListItemText, Menu, MenuItem } from "@material-ui/core"; import Settings from "@material-ui/icons/Settings"; export default function App() { const [openMenu, setOpenMenu] = useState(false); return ( <div className="App"> <h1 className="blueFont">Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> <Dialog fullWidth maxWidth="sm" open={true} hideBackdrop={true}> <DialogTitle style={{ height: "60px" }}>My title</DialogTitle> <DialogContent>My Content</DialogContent> <Divider style={{ width: "100%" }} /> <DialogActions> <div className="settings"> <Settings onClick={() => setOpenMenu(!openMenu)} /> <div className="menu"> <Menu open={openMenu}> <MenuItem> <ListItemText>First option</ListItemText> </MenuItem> <MenuItem> <ListItemText>Second option</ListItemText> </MenuItem> </Menu> </div> </div> </DialogActions> </Dialog> </div> ); }estilos.css
.App { font-family: sans-serif; text-align: center; } .blueFont { color: blue; } .settings { position: relative; } .menu { position: absolute; top: -10px; }También puede consultar la documentación
https://mui.com/components/menus
También he creado una caja de arena.
https://codesandbox.io/s/elastic-hooks-0fi6z?file=/src/App.js
const [anchorEl, setAnchorEl] = useState(null); const handleClick = (event) => { setAnchorEl(event.currentTarget); }; const handleClose = () => { setAnchorEl(null); }; const open = Boolean(anchorEl); <DialogActions> <div> <Button id="basic-button" onClick={handleClick}> Dashboard <Settings /> </Button> <Menu id="basic-menu" anchorEl={anchorEl} open={open} onClose={handleClose} anchorOrigin={{ vertical: "top", horizontal: "left" }} transformOrigin={{ vertical: "top", horizontal: "left" }} > <MenuItem onClick={handleClose}>Profile</MenuItem> <MenuItem onClick={handleClose}>My account</MenuItem> <MenuItem onClick={handleClose}>Logout</MenuItem> </Menu> </div> </DialogActions>