how to customize material ui tabs, tabs scroller-CodePudding

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.

CodePudding user response：

const theme = createTheme({
  components: {  
  MuiTabs: {
  styleOverrides: {
    indicator: {
      backgroundColor: 'orange',
      height: 10,
    },
  },
},
}
})

CodePudding user response：

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'
       }
}}