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

Question

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

查找以下片段:

1. 默认全角制表符。指示器占据基本按钮的全宽:

2. 指示器的宽度固定，但未与选项卡标签下方的中心对齐。

Answer 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