I am looking to create a customized box within the Appbar that spans the full height, as illustrated in the image below:
https://i.stack.imgur.com/CFMo0.jpg
However, the default Appbar provides padding from all sides to its internal elements, leading to an undesired layout like the one shown here:
https://i.stack.imgur.com/wVoHR.jpg
When using the disableGutter prop, it successfully removes padding on the right and left sides but does not affect the top and bottom paddings:
https://i.stack.imgur.com/qWGwx.jpg
While this is a step in the right direction, I now need to eliminate padding specifically from the top and bottom.
For the complete code example, please refer to: Or Click Here To View It In 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>
);
}