CODEWITHSUNDEEP
javascriptcssreactjsmaterial-uinext.js
Anwar Hossain
Anwar Hossain

Reputation: 291

how 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. 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.

Upvotes: 3

Views: 2162

Answers (2)

Kirubel Eneyew
Kirubel Eneyew

Reputation: 116

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

Upvotes: 1

Samira
Samira

Reputation: 2723

enter image description here

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

Upvotes: 2

Related Questions