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

问题

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

From this

To this

回答1:

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

回答2:

You can change it with TabIndicatorProps.

TabIndicatorProps={{
          style: {
            height:"10px",
        }
    }}

回答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

来源：https://stackoverflow.com/questions/47927414/how-do-i-change-the-height-of-the-tab-indicator-in-material-ui