Set border for Tab indicator in Material UI - css

Question

I made a simple NavBar and I overwrote the tab indicator in the following way:
indicator: {
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
},
<Tabs classes={{indicator: classes.indicator}} onChange={handleClickTab} value={value}>
{...}
</Tabs>
My main problem is, that I want the indicator to be a square like a border ( instead of an underline ) where I can set paddings and other related things. How can I achieve this?

Answer 1

firstly, i know theres a correct answer on the top but if you want another way this is another way to dot... this is not a good approach but this is what i did:
css:
//And This is for the color of the text ↓
.MuiTab-textColorPrimary.Mui-selected {
color: var(--darkGreen) !important;
}
//this is for changing the span or bottom border ↓
.PrivateTabIndicator-colorPrimary-4 {
background-color: var(--darkGreen) !important;
}
All i did was get their classnames and override/overwrite them by using the !important method on css
If it did helped you, which it did to me... Then Im Glad I helped! :)
Cheers!

Answer 2

In Material-UI, TabIndicator is a span, not border-bottom of some elements, so you need to remove it completely and add your own border, which removes the transition effect when switching between tabs. Also you want your border color to be gradient, so that requires a bit of work.
const useStyles = makeStyles({
indicator: {
background: "none" // remove MUI indicator
},
tabs: {
"& button": {
padding: 5 // the size of the border
},
"& button[aria-selected='true']": {
position: "relative",
"&:before": {
content: '""',
position: "absolute",
left: 0,
top: 0,
right: 0,
bottom: 0,
background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)", // border color
zIndex: 0
},
"& > *": { zIndex: 0 },
"& > .MuiTab-wrapper": {
background: "#fff",
height: "100%"
}
}
}
});
However, if you only want a single color for your border it becomes much easier to implement:
const useStyles = makeStyles({
indicator: {
background: "none"
},
tabs: {
"& button[aria-selected='true']": {
border: "3px solid red"
}
}
});
Usage
const classes = useStyles();
return (
<Tabs
className={classes.tabs}
classes={{ indicator: classes.indicator }}
{...props}
>
<Tab label="Item One" />
<Tab label="Item Two" />
<Tab label="Item Three" />
</Tabs>
);
Live Demo

Answer 3

You can use this class directly on your CSS and modify the Tab Border by default
.css-1aquho2-MuiTabs-indicator {
background-color: white!important;
}
Hope it helps