Material UI中如何实现TabContext下TabList标签居中对齐？

• 方案1：直接传入centered属性
  MUI v5及以上版本的TabList组件继承了普通Tabs的全部属性，直接给TabList添加centered属性即可生效，正确示例：

<TabContext value={selectedTab.toString()}>
  <TabList centered>
   <Tab>Hi</Tab>
   <Tab>Hi2</Tab>
  </TabList>
</TabContext>

• 方案2：通过sx属性自定义样式（兼容属性不生效的场景）
  如果版本较低或者属性不生效，可以直接修改TabList内部容器的布局规则，实现和原生centered完全一致的效果：

<TabContext value={selectedTab.toString()}>
  <TabList 
    sx={{
      "& .MuiTabs-flexContainer": {
        justifyContent: "center"
      }
    }}
  >
   <Tab>Hi</Tab>
   <Tab>Hi2</Tab>
  </TabList>
</TabContext>

• 方案3：全局/局部样式表覆盖
  如果使用单独的样式文件，可以给TabList添加自定义类名后通过类名覆盖样式：

/* 样式文件代码 */
.center-tablist .MuiTabs-flexContainer {
  justify-content: center;
}

组件内使用：

<TabList className="center-tablist">
  {/* Tab项 */}
</TabList>

内容的提问来源于stack exchange，提问作者Patrick Collins