CODEWITHSUNDEEP
reactjsfrontendmaterial-ui
Claim
Claim

Reputation: 921

Change the thickness of Tabs' indicator in MUI

So basically, this is what I want to do.

indicatorClassName doesn't work for me and the indicator from codesandbox doesn't change at all. I looked through the component's implementation , and found indicatorStyle, but it didn't help neither.

Any ideas?

Upvotes: 3

Views: 3811

Answers (2)

NearHuscarl
NearHuscarl

Reputation: 81370

You can use the sx prop in MUI v5:

<Tabs
  {...}
  TabIndicatorProps={{
    sx: {
      height: 5,
    },
  }}
>

Or if you want to set it in createTheme():

const theme = createTheme({
  components: {
    MuiTabs: {
      styleOverrides: {
        indicator: {
          height: 3,
        },
      },
    },
  },
});

Live Demo

Codesandbox Demo

Upvotes: 4

user2473779
user2473779

Reputation: 731

  1. Connect your component with custom styles using withStyles
  2. Write your own style for indicator (or any other name of your choice)
  3. Use it as below : 
          <Tabs
            ...
            classes={{indicator:classes.indicator}}
          >

Upvotes: 6

Related Questions