React MUI - 一致的标签内容高度

Question

我知道最好放在页面顶部。但是，假设它们位于页面中间。从内容很多的选项卡更改为内容很少的选项卡时，可滚动区域会消失。有没有办法保留白色的space?

https://codesandbox.io/s/labtabs-material-demo-forked-y39i2g?file=/demo.tsx

这是一个代码沙箱示例。

第 1 步向下滚动到选项卡。

第 2 步向下滚动选项卡 1 的内容（保留选项卡可见）

第 3 步单击选项卡 2（鼠标不再悬停在选项卡上，因为垂直滚动内容消失了）

编辑：我可以将我的根 div 最小高度更改为我需要的任何硬编码。我觉得这很老套，而且对最高的标签没有动态

Answer 1

您可以使用 useRef

将 minHeight style 设置为 tab2 和 tab3 为 tab1 的高度

const tabRef = React.useRef<HTMLDivElement>(null)
const [tabHeight, setTabHeight] = React.useState(0);
React.useEffect(() => {
    setTabHeight(tabRef.current.clientHeight)
}, [tabRef]);


<TabPanel value="1" ref={tabRef}></TabPanel>
<TabPanel value="2" sx={{ minHeight: tabHeight }}></TabPanel>
<TabPanel value="3" sx={{ minHeight: tabHeight }}></TabPanel>

演示：
https://codesandbox.io/s/labtabs-material-demo-forked-40kpwc?file=/demo.tsx

React MUI - 一致的标签内容高度

React MUI - Consistent Tab Content Height

reactjs

material-ui

tabs

height