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

Question

我想更改材料 ui 中选项卡指示器的高度/厚度

由此

对此

Answer 1

你可以用 来改变它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

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

有关此更改的详细信息，请参阅发行说明

// 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>

这是一个关于代码沙箱的完整工作示例

Answer 3

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

  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上的一个工作示例