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

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"
  }
}

演示代码

Answer 2

您可以简单地向 TabIndicatorProps 添加边距，如下所示：

        <Tabs
          value={value}
          onChange={handleChange}
          TabIndicatorProps={{
            sx: {
              width: "20% !important",
              marginLeft: "15%",
            },
          }}
          centered
        >