Currently, I am utilizing the MUI v5 AppBar to craft a navigation bar with Tabs. My aim is to have the background of the Tab blend seamlessly with the main page background upon being clicked, as illustrated here: https://i.sstatic.net/e4bDn.png
However, an issue arises where the Tabs are displayed as buttons and only center themselves within the appBar when activated. Adjusting the styling upon click to increase button height results in uniform growth across the entire button, failing to achieve the desired seamless blending effect with the rest of the page, as depicted here: https://i.sstatic.net/k9NdH.png
Is there a method to unevenly adjust the proportions of the buttons at the top and bottom? Furthermore, how can I ensure that the background of the button smoothly integrates with the remainder of the page without any visible shadows? Below is a snippet of my current code for reference:
<Box
sx={{
textTransform: "none",
flexGrow: 1,
display: { xs: "none", md: "flex" },
}}
>
<Tabs
value={selectedTab}
onChange={handleChange}
TabIndicatorProps={{hidden: true}}
sx={{
"& button": { borderRadius: 1 },
"& button.Mui-selected": {
color: "black",
backgroundColor: "#e5e5e5",
height: 70,
},
}}
>
<Tab value="one" label="Invoice" />
<Tab value="two" label="Students" />
<Tab value="three" label="Reports" />
</Tabs>
</Box>
I would greatly appreciate any input or solutions to these questions. Thank you.