Issue
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?
Solution
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!
Answered By - user13423237
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.