I'm using MUI Tabs component for the first time and I have a hard time making the scrollable feature work. Here's my code :

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>
      <Tabs
        value={currentYear}
        onChange={handleYearChange}
        variant="scrollable"
        scrollButtons
        allowScrollButtonsMobile
      >
        {renderTabs}
      </Tabs>
    </main>
  );
};

According to the documentation, all the props needed to make it scrollable are here but neither the scrollButtons nor other options (swipe or drag) are scrolling my tabs. It looks like I can't scroll to tabs outside of my screen. Because if I click on the partially visible tab on the right (2009 on the screenshot bellow), a little scroll happens but the part of the tab that was outside of the parent component on mount is still not visible. Meanwhile, the left scroll button appears and allow me to scroll back to the start of my tabs.

This problem is caused by the fact that my root component has overflow-x: hidden as a part of its style. If I remove it, the scroll is no longer an issue. But I would like to keep this style for the rest of my app. Is there any solution ?

I'm using MUI Tabs component for the first time and I have a hard time making the scrollable feature work. Here's my code :

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>
      <Tabs
        value={currentYear}
        onChange={handleYearChange}
        variant="scrollable"
        scrollButtons
        allowScrollButtonsMobile
      >
        {renderTabs}
      </Tabs>
    </main>
  );
};

According to the documentation, all the props needed to make it scrollable are here but neither the scrollButtons nor other options (swipe or drag) are scrolling my tabs. It looks like I can't scroll to tabs outside of my screen. Because if I click on the partially visible tab on the right (2009 on the screenshot bellow), a little scroll happens but the part of the tab that was outside of the parent component on mount is still not visible. Meanwhile, the left scroll button appears and allow me to scroll back to the start of my tabs.

This problem is caused by the fact that my root component has overflow-x: hidden as a part of its style. If I remove it, the scroll is no longer an issue. But I would like to keep this style for the rest of my app. Is there any solution ?

• css
• reactjs
• material-ui

1 Answer 1

The problem was not that #root had overflow-x: hidden but that this style was global for almost all tags. So I had to remove it from the MUI Tabs component children element like this :

<main>
      <Tabs
        value={currentYear}
        onChange={handleYearChange}
        variant="scrollable"
        scrollButtons
        allowScrollButtonsMobile
        sx={{
          "& *": {
            overflowX: "unset",
          },
        }}
      >
        {renderTabs}
      </Tabs>
</main>