如何更改材质ui中选项卡指示器的高度答案

【问题标题】：How do I change the height of the tab indicator in material ui如何更改材质ui中选项卡指示器的高度
【发布时间】：2018-06-04 06:36:59
【问题描述】：

我想更改材质ui中标签指示器的高度/厚度

从此

到这里

【问题讨论】：

你使用什么版本的material-ui？ 0.xx 还是 1.xx？
我目前使用的是v1.0.0-beta.24

标签： reactjs material-ui

【解决方案1】：

如果你想在 MUI v5 中使用sx，那么：

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

您可以使用TabIndicatorProps 更改它。

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

【讨论】：

这是最好的答案。

【解决方案2】：

您可以使用indicatorHeight 更改它。

<Tabs indicatorHeight={4}>
    <Tab label="Item One" />
    <Tab label="Item Two" />
    <Tab label="Item Three" />
</Tabs>

这是2021年更改标签指示器高度的最简单方法。

【讨论】：

【解决方案3】：

indicatorClassName 属性已在 v1.0.0-beta.37 版本中删除。 classes 属性现在是 v1 中自定义组件内部样式的标准方法。

有关此更改的详细信息，请参阅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>

这是一个完整的working example on code sandbox

【讨论】：

【解决方案4】：

您可以使用 Tabs 组件的 indicatorClassName 属性将类名传递给 TabIndicator：

  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>

这是codesandbox上的一个工作示例

【讨论】：

这将不起作用，因为 indicatorClassName 不被接受的道具，检查：material-ui.com/api/tabs
公平地说，这个答案是在 2017 年为 v1.0.0-beta.24 版本提供的，但是是的，今天它不会工作。