如何调整Material UI App Bar中Tab的宽度以完整展示全部标签

以下为可直接落地的修改方法：

• 调整单个Tab的默认样式
  MUI的Tab组件默认自带固定最小宽度与较大左右内边距，是导致标签占宽过大、侧边栏溢出的核心原因，直接通过sx属性覆盖默认样式即可：

<Tab 
  label="Upload"
  sx={{
    // 缩小左右内边距，默认值为24px，可根据实际展示效果调整数值
    px: 1,
    // 取消默认最小宽度限制，也可设置为更小的固定值如36px
    minWidth: 'auto',
    // 可选调整：缩小标签字号进一步节省空间
    fontSize: '0.875rem'
  }}
/>

• 批量统一调整所有标签样式
  如果需要给当前Tabs下的所有标签统一设置样式，无需逐个给Tab加属性，直接在父级Tabs组件上配置即可：

<Tabs
  value={tabValue}
  onChange={handleTabChange}
  sx={{
    // 统一匹配所有Tab子元素修改样式
    '& .MuiTab-root': {
      px: 1,
      minWidth: 'auto'
    }
  }}
>
  <Tab label="Tab 1" />
  <Tab label="Tab 2" />
  <Tab label="Upload" />
</Tabs>

• 额外适配垂直侧边栏场景
  如果是侧边栏垂直排列的Tabs，可额外检查是否开启了fullWidth属性，关闭该属性即可避免标签被强制拉伸占满多余宽度；如果仍有溢出，可同步检查侧边栏外层容器是否有多余内边距挤占展示空间。

如果你使用的是MUI v4版本，将上述sx属性的样式逻辑迁移到makeStyles方案中即可，核心都是覆盖MuiTab-root的默认样式规则。

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