React+Material UI自定义标签页：仅内容超宽时显示滚动条

问题分析 #

你的标签页始终显示滚动条的核心原因有两个：

1. 激活标签的伪元素样式错误：::after同时设置left: 100%和right: 100%，导致浏览器解析异常，间接撑开容器滚动宽度。
2. Flex容器中误用浮动：标签项（Tab）设置float: left，但父容器TabContainer是display: flex，浮动属性在flex布局中无效，干扰宽度计算。

修复步骤 #

1. 修正激活标签的伪元素样式

修改Tab组件中.tab-current的伪元素代码，移除冲突的定位属性：

"&.tab-current": {
  border: `2px solid  ${theme.palette.primary.main}`,
  borderBottom: "none",
  zIndex: 100,
  "&::before": {
    content: '""',
    position: "absolute",
    height: "2px",
    right: "100%",
    bottom: 0,
    width: "1000px",
    background: theme.palette.primary.main
  },
  "&::after": {
    content: '""',
    position: "absolute",
    height: "2px",
    left: "100%", // 仅保留left，移除right:100%
    bottom: 0,
    width: "4000px",
    background: theme.palette.primary.main
  },
  "& span": {
    color: theme.palette.primary.main
  }
}

2. 移除Flex容器内的浮动属性

删除Tab组件中的浮动相关属性，改用flex布局默认的排列方式：

const Tab = styled("li")(({ theme }) => ({
  border: `2px solid ${theme.palette.grey[900]}`,
  borderBottom: "none",
  margin: "0 10px",
  display: "block",
  position: "relative",
  borderTopRightRadius: 5,
  borderTopLeftRadius: 5,
  backgroundColor: theme.palette.common.white,
  "@media (max-width: 991px)": {
    textAlign: "center"
  },
  // ... 其他样式
}));

3. 优化滚动条显示（可选）

如果希望滚动条仅在内容超出时显示且不占用默认空间，给TabContainer添加滚动条隐藏样式：

const TabContainer = styled("ul")(() => ({
  padding: 0,
  margin: 0,
  display: "flex",
  flex: "1 1 auto",
  overflowX: "auto",
  overflowY: "hidden",
  // 滚动条优化
  scrollbarWidth: "none", // Firefox
  "&::-webkit-scrollbar": {
    display: "none" // Chrome/Safari/Edge
  },
  "&:hover::-webkit-scrollbar": {
    display: "block" // 鼠标悬停时显示滚动条（可选）
  },
  // ... 其他样式
}));

修正后效果 #

经过以上修改，标签页会仅在内容超出容器宽度时显示滚动条，单标签或少量标签时不再出现多余滚动条。

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