Material UI Tabs组件宽度低于600px时不显示滚动箭头如何解决？

你遇到的问题是Material UI内置的Tabs组件默认适配逻辑导致的：默认规则为屏幕宽度小于600px时直接隐藏滚动指示箭头，不管标签内容是否超出容器宽度。

你只需要给StyledTabs组件新增两个属性即可修复该问题：

• scrollButtons="auto"：控制滚动箭头的显示逻辑，标签总宽度超出容器时自动显示箭头，未超出时隐藏
• allowScrollButtonsMobile：允许在宽度小于600px的移动设备上保留上述滚动箭头的显示逻辑，而非默认直接隐藏

修改后的StyledTabs调用代码如下：

<StyledTabs 
  variant="scrollable"
  scrollButtons="auto"
  allowScrollButtonsMobile
  value={filterEvent} 
  onChange={handleChangeEvent} 
  aria-label="styled tabs example"
>
  {/* 原有Tab项保持不变 */}
</StyledTabs>

如果你希望不管标签总宽度是否超出容器，都固定显示滚动箭头，把scrollButtons="auto"改成scrollButtons={true}即可。

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