问题
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?
回答1:
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>
来源:https://stackoverflow.com/questions/61394435/how-do-i-override-material-uis-tab-selection-color