如何调整MUI v5 Tab点击后的非均匀比例及背景融合效果？

1. 按钮上下非均匀比例调整 #

不要直接修改按钮的height属性（会导致整体增高变形），改用内边距+相对定位实现上下视觉比例不均的效果：

• 保留按钮默认minHeight避免布局错乱
• 给选中的Tab设置更小的顶部内边距、更大的底部内边距，拉长底部视觉占比
• 通过相对定位让按钮向下偏移，底部超出AppBar范围

修改后的选中Tab样式：

"& button.Mui-selected": {
  color: "black",
  backgroundColor: "#e5e5e5",
  minHeight: 48, // 保留MUI默认最小高度
  paddingTop: 8, // 顶部内边距缩小
  paddingBottom: 24, // 底部内边距放大
  position: "relative",
  top: 4, // 向下偏移，让底部超出AppBar
  borderRadius: "8px 8px 0 0", // 仅保留顶部圆角，底部与页面衔接
}

2. 背景无缝融合与无阴影处理 #

要实现选中Tab背景与页面无缝衔接，需同步处理AppBar和Tab的样式：

• 移除AppBar阴影：给AppBar添加elevation={0}属性，或在sx中设置boxShadow: "none"
• 匹配背景色：确保选中Tab的背景色与页面主背景色完全一致
• 抵消间距：用负margin消除Tab偏移后产生的间隙，让底部完全贴合页面

完整修改代码示例 #

// AppBar组件配置
<AppBar sx={{ boxShadow: "none", backgroundColor: "#f0f0f0" }} elevation={0}>
  <Box
    sx={{
      textTransform: "none",
      flexGrow: 1,
      display: { xs: "none", md: "flex" },
    }}
  >
    <Tabs
      value={selectedTab}
      onChange={handleChange}
      TabIndicatorProps={{ hidden: true }}
      sx={{
        "& button": { borderRadius: 1, minHeight: 48 },
        "& button.Mui-selected": {
          color: "black",
          backgroundColor: "#e5e5e5", // 与页面主背景色保持一致
          paddingTop: 8,
          paddingBottom: 24,
          position: "relative",
          top: 4,
          borderRadius: "8px 8px 0 0",
          marginBottom: -4, // 负margin抵消top偏移的间距
        },
      }}
    >
      <Tab value="one" label="Invoice" />
      <Tab value="two" label="Students" />
      <Tab value="three" label="Reports" />
    </Tabs>
  </Box>
</AppBar>

// 页面主内容区（需与选中Tab背景色一致）
<Box sx={{ backgroundColor: "#e5e5e5", minHeight: "calc(100vh - 64px)" }}>
  {/* 页面内容 */}
</Box>

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