如何自定义 Material UI Tab 的指示符宽度和定位

Question

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

找到以下片段：

默认全角标签。指示器占据基本按钮的整个宽度：

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

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

如何自定义 Material UI Tab 的指示符宽度和定位

How to customise Material UI Tab's indicator width and positioning

tabs

styling

indicator

material-ui