When it comes to styling material tabs, I've managed to customize them by creating a theme and overriding the defaults like this:
MuiTab: {
styleOverrides: {
root: {
textTransform: 'capitalize', // Set textTransform to capitalize,
fontWeight: 600,
'& .MuiAvatar-root': {
width: 72,
height: 'auto',
marginBottom: 6,
},
'&.Mui-selected': {
borderTop: `2px solid ${COLORS.PrimaryMedDark}`,
borderLeft: `1px solid ${COLORS.BorderGray}`,
borderRight: `1px solid ${COLORS.BorderGray}`,
borderBottom: 'none',
color: COLORS.PrimaryMedDark,
'.MuiAvatar-img': {
//border: ' 2px solid #FFC44D !important',
},
},
'& .MuiIconButton-root': {
padding: 0,
backgroundColor: COLORS.White,
},
},
},
},
I have successfully added left, right, and top borders to the selected tab.
https://i.sstatic.net/20sCCdM6.png
However, despite everything else working as intended, the bottom border is proving difficult to remove by any means.
In my search for a solution, I came across a method to tailor tabs with custom designs:
https://mui.com/base-ui/react-tabs/
Although effective, this approach seems overly intricate for my needs since I can achieve everything except for removing the bottom border through existing styles.
Is resorting to a custom-style component as suggested in the aforementioned link the only path to solving this issue, or is there a way to address it within the constraints of the current tab structure?
Update
My attempt at setting a border bottom on '&.Mui-selected' using borderBottom: '5px solid red',, yielded this result:
https://i.sstatic.net/MX9aHRpB.png
The blue line you see is not part of the selected Tab element, as evidenced by the red border applied to the selected tab appearing above it. This default blue border seems to originate elsewhere, possibly at the parent level, which explains why changing the style of the selected tab doesn't eliminate it. It actually appears with an animation when the tab is selected.