How do I change the height of the tab indicator in material ui

Question

I would like to change the height/thickness of the tab indicator in material ui

From this

To this

Answer 1

If you want to use sx in MUI v5, then:

<Tabs
  TabIndicatorProps={{
    sx: {
      bgcolor: "orange"
      height: "10px"
    }
  }}
  onChange={handleChange}
  value={value}
>
  <Tab label="Item One" />
  <Tab label="Item Two" />
  <Tab label="Item Three" />
</Tabs>

---

You can change it with TabIndicatorProps.

<Tabs
  TabIndicatorProps={{
    style: {
      height:"10px",
    }
  }}
  onChange={handleChange}
  value={value}
>
  <Tab label="Item One" />
  <Tab label="Item Two" />
  <Tab label="Item Three" />
</Tabs>

Answer 2

The indicatorClassName property was removed in the v1.0.0-beta.37 release. The classes property is now the standard way to customize the internal styles of components in v1.

For details about this change, see the release notes

// Define custom styles
const styles = theme => ({
  bigIndicator: {
    height: 5
  }
})


<Tabs
  /* use the `classes` property to inject styles for the indicator class */
  classes={{ indicator: classes.bigIndicator }}
  onChange={handleChange}
  value={value}
>
  <Tab label="Item One" />
  <Tab label="Item Two" />
  <Tab label="Item Three" />
</Tabs>

Here is a complete working example on code sandbox

Answer 3

You can pass a class name to the TabIndicator via the Tabs component by using its indicatorClassName prop:

  const styles = theme => ({
    bigIndicator: {
      height: 5,
    },
  });

    <Tabs indicatorClassName={classes.bigIndicator} value={value} onChange={this.handleChange}>
      <Tab label="Item One" />
      <Tab label="Item Two" />
      <Tab label="Item Three" href="#basic-tabs" />
    </Tabs>

Here is a working example on codesandbox