Here i am trying to customize this mui tabs, tab color and tab bottom border color. I have tried to do so by using makestyles and so on but nothing is working.
my code is,
import { makeStyles } from '@mui/styles';
const useStyles = makeStyles({
tab:{
"& .MuiButtonBase-root":{
marginLeft:"25px"
}
},
tabs:{
"& .MuiTabs-indicator":{
ml:"30px"
}
}
})
Besides, i also face issues with customizing mui classes. Though i use a solution that is sx props but i know that is not best practices.
You can style the selected tab styling with the property '&.MuiTab-root.Mui-selected'
as for the border coloring for the current tab, you can use the prop TabIndicatorProps
and add a styles property,ie
export const StyledTab = styled((Tab))({
'&.MuiTab-root.Mui-selected': {
color: 'gold',
},
and
TabIndicatorProps={{
style: {
backgroundColor: '#f1db29'
}
}}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.