how to customize material ui tabs, tabs scroller

user_6409625 0
Viewed 368

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. enter image description here

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.

material-ui next.js reactjs css javascript
2 Answers

enter image description here

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

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