0
247
Viewshow to customize material ui tabs, tabs scroller
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 practice.
·
Juan Pablo Isaza
2 answers
Answer question0
const theme = createTheme({
components: {
MuiTabs: {
styleOverrides: {
indicator: {
backgroundColor: 'orange',
height: 10,
},
},
},
}
})
·
Juan Pablo Isaza
Report
0
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,i.e
export const StyledTab = styled((Tab))({
'&.MuiTab-root.Mui-selected': {
color: 'gold',
},
and
TabIndicatorProps={{
style: {
backgroundColor: '#f1db29'
}
}}
·
Juan Pablo Isaza
Report
Answer question