材质UI垂直选项卡-菜单内容被选项卡内容隐藏

Question

我在React中有一个垂直选项卡Material UI的示例，其中一个选项卡的内容是一个长字符串。

在这种情况下，由于内容太长，它在左侧覆盖菜单。为什么会这样？

预期的行为是仅将内容压缩在TabPanel中。 如果更改为内容较少的另一个选项卡，则菜单将返回并完全可见。

隐藏菜单：

显示菜单：

以下是官方提供的codeandbox： https://codesandbox.io/s/material-ui-vertical-tabs-content-overflowing-menu-0v6pb?file=/demo.js

谢谢

Answer 1

将overflow: visible添加到tabs CSS规则

tabs: {
    borderRight: `1px solid ${theme.palette.divider}`,
    overflow: 'visible',
}