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

问题描述

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

找到以下代码段：

1. 默认的全角标签。指示器占用基本按钮的全部宽度：

   

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

   

解决方法

基于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