I am currently trying to customize the MUI tab so that the indicator instead of a line at the bottom is a background color. After research I have found that using the TabIndicatorProps and passing it a style of display:none gets rid of the indicator completely. backgroundColor:"color" changes the line color but I cant figure out how to change it from a line to the whole background.
Some possible solutions I tried but did not work was giving the TabIndicatorProps a height:100% This create the background but masks the text in the tab. After that giving it an opacity: .8 gives me the effect I want but the text is too dark and I can't get it to change as the tab is active.
Expected Tab Image Current Tab Image
<Box sx={{ width: '100%', bgcolor: 'background.paper' }}>
<Tabs TabIndicatorProps={{
style: {
backgroundColor: '#D2603D',
borderRadius: '5px',
},
}} value={value} onChange={handleChange}>
<Tab textColor='blue' onClick={handleClick} sx={{
backgroundColor: '#F4F5F9',
borderRadius: '5px',
}} label="Daily" />
< Tab sx={{
backgroundColor: '#F4F5F9',
}} label="Weekly" />
<Tab sx={{
backgroundColor: '#F4F5F9',
borderRadius: '5px'
}} label="Monthly" />
</Tabs>
</Box >
I don't think that is possible in a clean way. Either quite dirty workarounds or substantial re-implementation of the functionality is necessary.
The tab labels are <button> elements, the tab indicator is a <span> that lies above these buttons, but you want the labels appear above the indicator.
So you have to either rearrange the stacking of the HTML elements, or add a second label above the indicator.
It is not possible to let the tab indicator slide behind the button text, but in front of the button background.
This can be done by using z-index. You have to set the z-index of the buttons, and you need to keep the
button background transparent.
Note that you might have to be careful if there are other elements which already have a z-index,
or should stay behind the buttons, in which case you would need to change the z-index of these other elements as well.
<Tab label="Daily" style={{ zIndex: 1 }} />
<Tab label="Weekly" style={{ zIndex: 1 }} />
<Tab label="Monthly" style={{ zIndex: 1 }} />
const IndicatorLabel = ({ label }) => {
return <span className={'indicator-label'}>
{ label }
</span>;
};
// ...
<Tabs
TabIndicatorProps={{
// ...
children: <IndicatorLabel label={ currentLabel } />
}}
>
// ...
You could set the background color of the <button> dynamically, and not use the indicator at all. Of course, you would lose the sliding effect.
Of course, you could implement you own tab indicator from scratch, and don't use the MUI tab indicator.