Material UI 垂直选项卡 - 由选项卡内容隐藏的菜单内容

Question

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

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

预期的行为是内容只是被压缩在 TabPanel 中。 如果您切换到另一个内容较少的选项卡，菜单将返回并完全可见。

隐藏菜单：

显示菜单：

这是从官方代码分叉出来的代码框： 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',
}