Quiero hacer un cuadro dentro de la barra de aplicaciones que ocupe toda la altura, como se muestra a continuación:

Sin embargo, la barra de aplicaciones de forma predeterminada proporciona relleno desde la parte superior, inferior, izquierda y derecha a los elementos internos, lo que da como resultado el siguiente comportamiento no deseado:

Si configuro el accesorio disableGutter , solo deshabilita el relleno de la derecha y la izquierda, pero no deshabilita los rellenos de la parte superior e inferior:

Esto es genial, pero ahora solo tengo que deshabilitar el relleno de la parte superior e inferior.

Código completo: O haga clic aquí para verlo en Sandbox

 import * as React from 'react'; import AppBar from '@mui/material/AppBar'; import Box from '@mui/material/Box'; import Toolbar from '@mui/material/Toolbar'; import Typography from '@mui/material/Typography'; export default function Topnav() { return ( <AppBar> <Toolbar disableGutters> <Typography sx={{ px: 1 }}>About</Typography> <Typography sx={{ px: 1 }}>Settings</Typography> <Typography sx={{ px: 1, flexGrow: 1 }}>Contact Us</Typography> <Box sx={{ background: 'pink' }}>Mr bean</Box> </Toolbar> </AppBar> ); }