如何更改材料ui

Question

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

来自此

到此

Answer 1

v1.0.0-beta.37版本中删除了indicatorClassName属性。 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

Answer 2

您可以使用indicatorClassName道具通过Tabs组件将类名传递给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

的工作示例

Answer 3

You can change it with TabIndicatorProps.

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

Answer 4

您可以使用 indicatorHeight 更改它。

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

这是在 2021 年更改选项卡指示器高度的最简单方法。