MUI TabList嵌套Grid容器后溢出问题：如何修改ScrollableTabs样式恢复默认滚动行为？

Got it, let's break down why your scrollable tabs are overflowing instead of behaving as expected, and how to fix it without modifying the locked TabsWrapper or MyTabList components.

The Root Cause #

Your TabsWrapper uses CSS Grid, which by default makes child elements shrink to fit the container. Inside MyTabList, the Stack component (with direction="row") defaults to alignItems: stretch, forcing the TabList to fill the available width instead of expanding to fit all tabs. This breaks MUI's built-in scrollable behavior because the TabList can't exceed the container's bounds.

The Solution #

We can override the necessary styles from within the editable ScrollableTabs component using MUI's sx prop with nested selectors. This will restore the scrollable behavior while respecting the locked components.

Modified Code #

import React from "react";
import { TabContext, TabPanel, TabList } from "@mui/lab";
import { Box, Tab, Stack } from "@mui/material";

/** 不可修改 */
function TabsWrapper(props) {
  return (
    <div style={{ display: "grid", gridAutoFlow: "row" }}>{props.children}</div>
  );
}

/** 不可修改 */
function MyTabList(props) {
  return (
    <Stack direction="row">
      <TabList orientation="horizontal" variant="scrollable" onChange={props.onChange} >
        {props.children}
      </TabList>
    </Stack>
  );
}

/** 可修改 */
export default function ScrollableTabs() {
  const tabValues = [...Array(30)].map((_, index) => String(index + 1));
  const [tab, setTab] = React.useState("1");
  const handleChange = (_, newValue) => {
    setTab(newValue);
  };

  return (
    <TabsWrapper>
      <TabContext value={tab}>
        {/* Custom container to fix scroll behavior */}
        <Box sx={{
          // Target the Stack inside MyTabList
          '& .MuiStack-root': {
            overflowX: 'auto',
            // Optional: Hide scrollbar to match MUI's default scrollable tab style
            '&::-webkit-scrollbar': { display: 'none' },
            msOverflowStyle: 'none',
            scrollbarWidth: 'none'
          },
          // Target the MUI TabList component
          '& .MuiTabList-root': {
            minWidth: 'max-content', // Let TabList expand to fit all tabs
            flexShrink: 0 // Prevent Flex layout from compressing the TabList
          }
        }}>
          <MyTabList onChange={handleChange}>
            {tabValues.map((value) => (
              <Tab label={`Tab ${value}`} value={value} key={value} />
            ))}
          </MyTabList>
        </Box>
        <Box>
          {tabValues.map((value) => (
            <TabPanel value={value} key={value}>
              Tab content {value}
            </TabPanel>
          ))}
        </Box>
      </TabContext>
    </TabsWrapper>
  );
}

How It Works #

1. Stack Adjustment: We set overflowX: 'auto' on the Stack inside MyTabList so it displays a horizontal scrollbar when content exceeds its bounds. The optional scrollbar-hiding styles match MUI's native scrollable tab appearance.
2. TabList Adjustment: By setting minWidth: 'max-content', we ensure the TabList expands to fit all tabs instead of being constrained to the container width. flexShrink: 0 prevents the Flex layout from shrinking the TabList to fit.

This approach keeps your locked components intact while restoring the expected scrollable behavior for your tabs.

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