He estado jugando con la API popper de MUI y he notado que se sale de mi div principal. ¿Alguien puede sugerir la mejor manera de detener esto?
Me gustaría que el popper fuera más grande en altura. Por favor ver más abajo:
const DescriptionEditor = (props) => { const [anchorEl, setAnchorEl] = React.useState(null); const [open, setOpen] = React.useState(false); const [placement, setPlacement] = React.useState(); const handleClick = (newPlacement) => (event) => { setAnchorEl(event.currentTarget); setOpen((prev) => placement !== newPlacement || !prev); setPlacement(newPlacement); }; <Box sx={{ width: 200 }}> <Popper open={open} anchorEl={anchorEl} placement={placement} transition> {({ TransitionProps }) => ( <Fade {...TransitionProps} timeout={350}> <Paper> <Typography variant="subtitle3">WWF values diversity and is building a workforce that reflects the community we serve.</Typography> </Paper> </Fade> )} </Popper> <Grid container justifyContent="center"> <Button onClick={handleClick('bottom')} variant="subtitle2" color="primary">Corporate Profile</Button> </Grid> </Box> }Si alguien conoce un buen método para restringir esto, potencialmente al div principal en el que se encuentra a través de una función maxWidth o un accesorio del 100%, ¡hágamelo saber!
Para poder establecer el ancho del popper en relación con su div principal, debe usar el accesorio "disablePortal". Hace que el popper esté bajo la jerarquía DOM del elemento principal, de lo contrario, MUI crea el popper en el primer nivel del cuerpo.
También tendrá que agregar la posición: 'relativa' al div principal y establecer el ancho de popper en '100%'.
const [anchorEl, setAnchorEl] = React.useState(null); const [open, setOpen] = React.useState(false); const [placement, setPlacement] = React.useState(); const handleClick = (newPlacement) => (event) => { setAnchorEl(event.currentTarget); setOpen((prev) => placement !== newPlacement || !prev); setPlacement(newPlacement); }; return ( <Box sx={{ width: 200, position: 'relative' }}> <Popper open={open} anchorEl={anchorEl} disablePortal placement={placement} transition> {({ TransitionProps }) => ( <Fade {...TransitionProps} timeout={350}> <Paper sx={{ width: '100%'}}> <Typography variant="subtitle3">WWF values diversity and is building a workforce that reflects the community we serve.</Typography> </Paper> </Fade> )} </Popper> <Grid container justifyContent="center"> <Button onClick={handleClick('bottom')} variant="subtitle2" color="primary">Corporate Profile</Button> </Grid> </Box> );