如何将Material UI选项卡拆分为左右两组？

你遇到的错误是因为两个独立的Tabs组件无法识别彼此的Tab值——当选中右侧Tabs里的tabfour或tabfive时，左侧Tabs找不到对应value，因此抛出错误。正确的做法是使用单个Tabs组件，通过布局实现Tab分组，这样既能保留选中高亮效果，又不会触发错误。

实现方案 #

将所有Tab放在同一个Tabs组件内，用容器（如MUI的Box）将Tab分成两组，再通过flex布局让两组分别居左和居右：

import { Tabs, Tab, Box } from '@mui/material';

// 假设你已定义selectedTab和setSelectedTab状态
<Tabs 
  value={selectedTab} 
  onChange={(e, newVal) => setSelectedTab(newVal)}
  sx={{
    display: 'flex',
    justifyContent: 'space-between',
    // 可选：调整选中下划线的适配范围，避免偏移
    '& .MuiTabs-indicator': { left: 0, right: 0 }
  }}
>
  {/* 左侧Tab组 */}
  <Box sx={{ display: 'flex' }}>
    <Tab value="tabone" label="One" />
    <Tab value="tabtwo" label="Two" />
    <Tab value="tabthree" label="Three" />
  </Box>
  {/* 右侧Tab组 */}
  <Box sx={{ display: 'flex' }}>
    <Tab value="tabfour" label="Four" />
    <Tab value="tabfive" label="Five" />
  </Box>
</Tabs>

关键说明 #

1. 单个Tabs组件：所有Tab都归属同一个Tabs实例，确保选中状态能被正确识别，彻底避免"value不存在"的错误。
2. flex布局分组：通过justifyContent: 'space-between'让两个Box分别贴紧容器左右两侧，完美实现分组视觉效果。
3. 保留原生交互：由于所有Tab都在同一个Tabs下，选中时的下划线高亮、点击反馈等原生交互逻辑完全正常，无需额外处理。

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