Reputation: 19320
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?
Upvotes: 14
Views: 25284
Reputation: 377
Starting from MUI v5, it can be easily done in using the createTheme()]
API as shown here.
You need to override the styles using something like this:
let theme = useTheme();
theme = createTheme(theme, {
components: {
MuiTab: {
styleOverrides: {
root:{
"&.Mui-selected": {
backgroundColor: theme.palette.secondary.main,
color: theme.palette.secondary.contrastText,
borderRadius: "25px"
}
}
}
}
}
})
This theme can be passed to a <ThemeProvider />
component which would wrap the section where the tabs are present.
Note:
useTheme()
, createTheme()
and <ThemeProvider />
all need to be imported from @mui/material/styles
and not from @emotion/react
.@mui/lab
provides <TabContext />
, <TabList />
, and <TabPanel />
components which the docs recommend using though you can still use the old components of <Tabs />
.Upvotes: 9
Reputation: 6946
Try this !
indicator: {
backgroundColor : 'your favorite color',
},
<Tabs classes={{ indicator: classes.indicator }}>
<Tab>....
</Tabs>
Upvotes: 1
Reputation: 191
You can now use the TabIndicatorProps to style the active indicator with the current version of MUI (4.10.02). Docs available here.
There are 2 ways to do this:
METHOD 1: using style: {}
import React from "react";
import PropTypes from "prop-types";
import { Tabs, Tab, makeStyles } from "@material-ui/core";
const TabsIndicator = () => {
const [value, setValue] = React.useState(0);
const handleChange = (event, newValue) => {
setValue(newValue);
};
return (
<React.Fragment>
<Tabs
value={value}
onChange={handleChange}
TabIndicatorProps={{
style: { background: "cyan", height: "10px", top: "35px" }
}}
>
<Tab label="TEST1" value={0} />
<Tab label="TEST2" value={1} />
<Tab label="TEST3" value={2} />
<Tab label="TEST4" value={3} />
</Tabs>
</React.Fragment>
);
};
export default TabsIndicator;
Method 2: using className: {classes}
import React from "react";
import PropTypes from "prop-types";
import { Tabs, Tab, makeStyles } from "@material-ui/core";
const useStyles = makeStyles(theme => ({
indicator: {
backgroundColor: "green",
height: "10px",
top: "45px"
}
}));
const TabsIndicator = () => {
const classes = useStyles();
const [value, setValue] = React.useState(0);
const handleChange = (event, newValue) => {
setValue(newValue);
};
return (
<React.Fragment>
<Tabs
value={value}
onChange={handleChange}
TabIndicatorProps={{ className: classes.indicator }}
>
<Tab label="TEST1" value={0} />
<Tab label="TEST2" value={1} />
<Tab label="TEST3" value={2} />
<Tab label="TEST4" value={3} />
</Tabs>
</React.Fragment>
);
};
export default TabsIndicator;
You can also check out my sandbox here. Hope this helps!
Upvotes: 7
Reputation: 585
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>
Upvotes: 15