如何自定义 Material UI Tabs 指示器的宽度和位置

【问题标题】：How to customise Material UI Tab's indicator width and positioning如何自定义 Material UI Tabs 指示器的宽度和位置
【发布时间】：2020-08-19 10:28:15
【问题描述】：

我正在使用 Material ui 的标签，并且能够对标签的指示器进行更改。但是，我正在尝试使用样式将每个选项卡的指示器宽度减小到某个固定宽度。但似乎指标以一些计算值定位在左侧，并且给它一个宽度不会使指标居中对齐。找不到合适的解决方案，请帮助我。这是可编辑的CodeSandbox。

在下面找到sn-ps：

默认全角标签。指示器占据基本按钮的全宽：
指示器的宽度固定，但未与选项卡标签下方的中心对齐。

【问题讨论】：

标签： tabs material-ui styling indicator

【解决方案1】：

基于docs，您需要附加一个span 元素作为指标的子元素（使用TabIndicatorProps）。然后你可以把指示器当作一个伸缩容器，span 当作一个固定宽度的伸缩项。

这是组件部分：

<Tabs
  {...other}
  classes={{
    root: className,
    flexContainer: "flexContainer",
    indicator: "indicator"
  }}
  variant="fullWidth"
  TabIndicatorProps={{ children: <span /> }}
  centered
/>

这是样式部分：

"& .indicator": {
  display: "flex",
  justifyContent: "center",
  backgroundColor: "transparent",
  "& > span": {
    maxWidth: 40,
    width: "100%",
    backgroundColor: "white"
  }
}

Demo code

【讨论】：