如何实现MUI Tabs组件的响应式适配效果？

MUI Tabs 组件完全支持响应式配置，你期望的小屏超出可横向滚动的效果可以通过内置属性直接实现，无需二次开发。

你当前的实现效果：

你期望实现的效果：

实现方案 #

方案1：使用内置响应式属性（推荐） #

直接给Tabs组件配置以下属性即可达到目标效果：

import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import React from 'react';

function ResponsiveTabs() {
  const [value, setValue] = React.useState(0);
  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <Tabs
      value={value}
      onChange={handleChange}
      variant="scrollable"
      scrollButtons="auto"
      aria-label="响应式标签栏"
    >
      <Tab label="标签项1" />
      <Tab label="标签项2" />
      <Tab label="标签项3" />
      <Tab label="标签项4" />
      <Tab label="标签项5" />
      <Tab label="标签项6" />
    </Tabs>
  );
}

参数说明：

• variant="scrollable"：标签总宽度超出容器宽度时，自动变为可横向滚动模式，不会出现挤压换行的问题
• scrollButtons="auto"：大屏设备两侧自动显示滚动箭头按钮，小屏设备自动隐藏箭头，支持手指滑动滚动
• 如果你需要小屏也保留滚动箭头按钮，可以额外添加allowScrollButtonsMobile属性

方案2：自定义断点适配 #

如果需要更灵活的适配逻辑，比如小屏直接切换为下拉选择器替代标签栏，可以结合MUI的useMediaQuery钩子实现：

import { useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';
import React from 'react';

function CustomResponsiveTabs() {
  const theme = useTheme();
  const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
  const [value, setValue] = React.useState(0);

  const handleTabChange = (event, newValue) => {
    setValue(newValue);
  };
  const handleSelectChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <>
      {isSmallScreen ? (
        <Select value={value} onChange={handleSelectChange} fullWidth>
          <MenuItem value={0}>标签项1</MenuItem>
          <MenuItem value={1}>标签项2</MenuItem>
          <MenuItem value={2}>标签项3</MenuItem>
          <MenuItem value={3}>标签项4</MenuItem>
          <MenuItem value={4}>标签项5</MenuItem>
          <MenuItem value={5}>标签项6</MenuItem>
        </Select>
      ) : (
        <Tabs value={value} onChange={handleTabChange} variant="fullWidth">
          <Tab label="标签项1" />
          <Tab label="标签项2" />
          <Tab label="标签项3" />
          <Tab label="标签项4" />
          <Tab label="标签项5" />
          <Tab label="标签项6" />
        </Tabs>
      )}
    </>
  );
}

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