如何修改Material-UI垂直Tabs实现左侧对齐并取消大写配置？

针对你遇到的垂直Tabs对齐和文本大写的问题，我来一步步帮你解决：

1. 实现垂直Tabs左侧对齐 #

你之前用alignItems: 'left'不生效，是因为CSS的alignItems属性没有left这个有效值——在垂直排列（flex-direction: column）的容器中，要实现水平方向的左对齐，应该用alignItems: 'flex-start'。

具体配置方式：

• 如果是用MUI的sx prop（推荐），可以给Tabs组件添加：

<Tabs
  orientation="vertical"
  sx={{
    borderRight: `1px solid ${theme.palette.divider}`,
    alignItems: 'flex-start', // 替换成flex-start而非left
    overflow: 'visible'
  }}
  // 其他props...
>

• 如果你是用createTheme自定义主题，也可以在主题的Tabs组件样式中配置：

const theme = createTheme({
  components: {
    MuiTabs: {
      styleOverrides: {
        vertical: {
          alignItems: 'flex-start',
          borderRight: `1px solid ${theme.palette.divider}`
        }
      }
    }
  }
});

这样配置后，垂直排列的Tab项就会靠左对齐了。

2. 移除Tabs的文本大写效果 #

MUI的Tab组件默认会给标签文本添加text-transform: uppercase样式，要移除这个效果，有两种常用方式：

方式一：直接给单个Tab组件添加样式 #

给每个Tab组件设置文本转换为无：

<Tab 
  label="Item One" 
  sx={{ textTransform: 'none' }} 
/>
<Tab 
  label="Item Two" 
  sx={{ textTransform: 'none' }} 
/>

方式二：全局主题配置（一次性修改所有Tab） #

如果希望所有Tab都取消大写，在自定义主题中统一修改：

const theme = createTheme({
  components: {
    MuiTab: {
      styleOverrides: {
        root: {
          textTransform: 'none'
        }
      }
    }
  }
});

这样就能让Tab的标签文本保持原本的大小写格式了。

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