包裹在网格内时 Mui TabList 溢出

Question

在下面的代码中，选项卡在 TabsWrapper 中换行后超出了可见宽度。我有一个用例，其中选项卡将始终在类似的包装器中呈现。是否可以覆盖 ScrollableTabs 中的某些样式以实现默认行为？

我觉得应该有一个修复程序，因为这似乎是 w.r.t 到 CSS Grid 和 Flex 的常见用例。
以防万一您不熟悉默认行为，请尝试渲染 ScrollableTabs 而不要将其包装在 TabsWrapper.
中

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

/** Cannot be changed */
function TabsWrapper(props) {
  return (
    <div style={{ display: "grid", gridAutoFlow: "row" }}>{props.children}</div>
  );
}

/** Cannot be changed */
function MyTabList(props) {
  return (
    <Stack direction="row">
      <TabList
        orientation="horizontal"
        variant="scrollable"
        onChange={props.onChange}
      >
        {props.children}
      </TabList>
    </Stack>
  );
}

/** Can be changed */
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}>
        <MyTabList onChange={handleChange}>
          {tabValues.map((value) => (
            <Tab label={`Tab ${value}`} value={value} key={value} />
          ))}
        </MyTabList>
        <Box>
          {tabValues.map((value) => (
            <TabPanel value={value} key={value}>
              Tab content {value}
            </TabPanel>
          ))}
        </Box>
      </TabContext>
    </TabsWrapper>
  );
}

工作代码和盒子 - https://codesandbox.io/s/mui-custom-scrollable-tabs-2mfcjr

谢谢！

Answer 1

在 <div style={{ overflow: "hidden" }}> 中包装 TabContext 解决了这个问题。

ScrollableTabs jsx 应该看起来像 -

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>
      <div style={{ overflow: "hidden" }}>
        <TabContext value={tab}>
          <MyTabList onChange={handleChange}>
            {tabValues.map((value) => (
              <Tab label={`Tab ${value}`} value={value} key={value} />
            ))}
          </MyTabList>
          <Box>
            {tabValues.map((value) => (
              <TabPanel value={value} key={value}>
                Tab content {value}
              </TabPanel>
            ))}
          </Box>
        </TabContext>
      </div>
    </TabsWrapper>
  );
}

工作代码和盒子 - https://codesandbox.io/s/mui-custom-scrollable-tabs-forked-6ycqfv

包裹在网格内时 Mui TabList 溢出

Mui TabList overflowing when wrapped inside a grid

reactjs

flexbox

material-ui

css-grid