Estoy creando una versión móvil de una aplicación web con Material UI y tengo problemas para hacer coincidir los diseños. Estoy usando MUI App-Bar junto con MUI Modal para crear algo similar a las maquetas que se muestran a continuación.

El comportamiento esperado es que el usuario seleccione el botón en la parte superior derecha del encabezado para abrir el modal y tiene la opción de usar el botón superior derecho nuevamente para cerrar el modal. El usuario también debería poder seleccionar el logotipo de My App en el encabezado para navegar a la página de inicio.

El comportamiento real es que la barra de encabezado está cubierta por el fondo del modal; Puedo agregar un estilo como marginTop: 150px al fondo para lograr visualmente el resultado esperado, pero el botón y el logotipo aún no se pueden usar.

¿Hay alguna forma de anular el componente de fondo para que se pueda utilizar el encabezado?

 const useStyles = makeStyles((theme: Theme) => ({ card: { position: "absolute", top: "160px", width: "90vw", borderTopLeftRadius: "0px", borderTopRightRadius: "0px", }, backDrop: { marginTop: "160px", }, })); const Header = (props) => { const classes = useStyles(); const [menuOpen, setMenuOpen] = React.useState(false); const handleOpenUserMenu = () => { setMenuOpen(true); }; const handleCloseUserMenu = () => { setMenuOpen(false); }; return ( <AppBar position="static" style={{ backgroundColor: "#FFFFFF", zIndex: -1, }} > <Container maxWidth="xl"> <Toolbar> <Box sx={{ flexGrow: 1 }}> <Link to={"/home"}> <Logo className={classes.logo} /> </Link> </Box> <Box sx={{ flexGrow: 0 }}> <IconButton onClick={handleOpenUserMenu}> <MenuIcon /> </IconButton> <Modal open={menuOpen} onClose={onClose} BackdropProps={{ classes: { root: classes.backDrop } }} > <Card className={classes.card}> <CardContent> <MenuItems menuOptions={menuOptions} /> </CardContent> </Card> </Modal> </Box> </Toolbar> </Container> </AppBar> ); };