MUI Tabs滚动失效求助：根组件overflow-x:hidden兼容方案咨询

问题原因 #

根组件设置的overflow-x: hidden会裁剪所有水平方向超出其边界的内容，而MUI的scrollable Tabs组件依赖内部可滚动容器实现标签滚动，这个容器的滚动范围被根组件的边界限制，导致无法正常滚动到全部标签。

可行解决方案 #

方案1：给Tabs添加专属包裹容器（推荐） #

在Tabs外层套一个独立容器，设置overflow-x: auto和width: 100%，让滚动逻辑在这个容器内部生效，完全隔离根组件的overflow限制。修改后的代码如下：

export const History = () => {
  const [currentYear, setCurrentYear] = useState(0);
  const renderTabs = useMemo(() => {
    const tabs = [];
    for (let i = 2024; i > 2002; i--) {
      tabs.push(<Tab label={i} />);
    }
    return tabs;
  }, []);
  const handleYearChange = useCallback((event, newValue) => {
    setCurrentYear(newValue);
  }, []);

  return (
    <main>
      <div style={{ width: '100%', overflowX: 'auto' }}>
        <Tabs
          value={currentYear}
          onChange={handleYearChange}
          variant="scrollable"
          scrollButtons
          allowScrollButtonsMobile
        >
          {renderTabs}
        </Tabs>
      </div>
    </main>
  );
};

方案2：自定义Tabs内部滚动容器样式 #

通过MUI的sx属性修改Tabs内部滚动容器的样式，强制开启水平滚动。注意这个方法依赖MUI的内部类名，版本更新时可能需要调整：

<Tabs
  value={currentYear}
  onChange={handleYearChange}
  variant="scrollable"
  scrollButtons
  allowScrollButtonsMobile
  sx={{
    '& .MuiTabs-scroller': {
      overflowX: 'auto',
      overflowY: 'visible'
    }
  }}
>
  {renderTabs}
</Tabs>

方案3：缩小根组件overflow的作用范围 #

如果根组件的overflow-x: hidden是全局设置的，可以将其仅应用到需要的区域（比如应用的主体内容区），让Tabs所在的模块不受该样式影响，从根源避免冲突。

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