当在网格中包裹时，Mui TabList溢出

Question

在下面的代码中，选项卡在TabsWrapper中包装后溢出超过可见宽度。我有一个用例，其中选项卡总是在类似的包装中呈现。是否有可能在ScrollableTabs中覆盖一些样式以实现默认行为?

• 我觉得应该有一个修复，因为这似乎是一个常见的用例w.r.t CSS网格和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

将TabContext包裹在<div style={{ overflow: "hidden" }}>中可以修复此问题。

ScrollableTabsjsx应该看起来像-

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