更改 MUI 中 Tabs 指示器的粗细

【问题标题】：Change the thickness of Tabs' indicator in MUI更改 MUI 中 Tabs 指示器的粗细
【发布时间】：2018-09-28 08:20:34
【问题描述】：

所以基本上，this 是我想要做的。

indicatorClassName 对我不起作用，codesandbox 的指标完全没有变化。我查看了组件的implementation ，找到了indicatorStyle，但也没有用。

有什么想法吗？

【问题讨论】：

这里是一个更新的example on code sandbox，它适用于最新版本的材料ui。
太棒了，效果很好！谢谢
很高兴有帮助。

标签： reactjs frontend material-ui

【解决方案1】：

您可以在MUI v5中使用sx prop：

<Tabs
  {...}
  TabIndicatorProps={{
    sx: {
      height: 5,
    },
  }}
>

或者如果你想设置在createTheme():

const theme = createTheme({
  components: {
    MuiTabs: {
      styleOverrides: {
        indicator: {
          height: 3,
        },
      },
    },
  },
});

现场演示

【讨论】：

【解决方案2】：

使用withStyles 将您的组件与自定义样式连接起来
为指标编写您自己的样式（或您选择的任何其他名称）
如下使用：

          <Tabs
            ...
            classes={{indicator:classes.indicator}}
          >

【讨论】：