Menu
I'm building a React 16.13.0 application with the materialui-tabs theme, https://material-ui.com/api/tab/. I have created these styles in my component ...
const theme = createMuiTheme({
overrides: {
MuiTab: {
root: {
"&.MuiTab-root": {
backgroundColor: "black",
border: 0,
borderBottom: "2px solid",
"&:hover": {
border: 0,
borderBottom: "2px solid",
},
},
"&.Mui-selected": {
backgroundColor: "none",
borderBottom: "2px solid #373985",
borderColor: "#373985",
}
}
}
}
});
const useStyles = makeStyles((theme) => ({
root: {
width: "100%",
flexGrow: 1,
color: "#3739B5",
backgroundColor: "white",
},
viewButtons: {
marginTop: theme.spacing(2),
marginBottom: theme.spacing(1),
},
}));
These are applied to
<ThemeProvider theme={theme}>
<AppBar position="static">
<Tabs
classes={classes}
value={value}
variant="fullWidth"
centered
onChange={handleChange}
aria-label="volunteer dashboard tabs"
>
<Tab label={proposedLabel} {...a11yProps(2)} />
<Tab label={planningLabel} {...a11yProps(1)} />
<Tab label={inProgressLabel} {...a11yProps(0)} />
<Tab label={completedLabel} {...a11yProps(3)} />
</Tabs>
</AppBar>
</ThemeProvider>
I'm trying to change the background color of the selected tab. Based on devtools, inspection, the class is listed as
.PrivateTabIndicator-colorSecondary-267 {
background-color: #f50057;
}
.PrivateTabIndicator-root-265 {
width: 100%;
bottom: 0;
height: 2px;
position: absolute;
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
However, despite the fact I have listed that in my theme, the color appears as red, despite what I specified in my style
How can I override the border color of the selected tab?
533
We can use the injectFirst boolean prop to add styles that override existing Material UI styles. This way, styles we referenced from external CSS files will override Material UI’s. The component is published to Bit.dev. Feel free to inspect it further.
The first is to use a custom theme color and let the tabs use that for their background color. The second is to give individual tabs a class and then properly select the MUI global classes on the tab.
Custom theming in Material-UI is simply the modification of the existing theme palette to use whatever colors you specify. In our case: This method changes the AppBar background color without any specific targeting of the background CSS property. Same goes for the text color.
A simple display: none does the trick of hiding the indicator. If you want to change the indicator color instead, simply apply a background color in this selector. There are likely quite a few customizations you could do here to the tab indicator size, padding, margin, or anything else interesting.
Can you try this solution working for me. I assume that you want to override the bottom border indicator color.
<Tabs value={0} TabIndicatorProps={{ style: { background: "#hex-color" } }}>
<Tab className={clasess.tab} label="Home" />
<Tab className={clasess.tab} label="Services" />
</Tabs>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
