VerticalTab Material React UI被选项卡内容溢出

Question

我正试图使用这个组件，但当我放置的内容大于我的网格大小时，内容会溢出我的VerticalTab，正如你在这个代码沙盒中看到的那样这就是我尝试的：

return (
<div className={classes.root}>
<Tabs
orientation="vertical"
variant="scrollable"
value={value}
onChange={handleChange}
aria-label="Vertical tabs example"
className={classes.tabs}
>
<Tab label="Item One" {...a11yProps(0)} />
<Tab label="Item Two" {...a11yProps(1)} />
<Tab label="Item Three" {...a11yProps(2)} />
<Tab label="Item Four" {...a11yProps(3)} />
<Tab label="Item Five" {...a11yProps(4)} />
<Tab label="Item Six" {...a11yProps(5)} />
<Tab label="Item Seven" {...a11yProps(6)} />
</Tabs>
<TabPanel value={value} index={0}>
<Grid container>
<Grid item xs={6}>
ELemento 1 sadasdasdasdasdadadad
</Grid>
<Grid item xs={6}>
Elemento 2 sadasdasdasdasdasdasd dsadasdasdsadasdsadasdadaddsadasd
</Grid>
</Grid>
</TabPanel>
<TabPanel value={value} index={1}>
Item one
</TabPanel>
</div>
);

正如您所看到的，我的<Grid>中的内容溢出了我的<Tabs>。还有其他元素我必须放在<Grid>上？

Answer 1

这实际上取决于设备的大小。这种情况也发生在物料ui文档中的示例中(https://codesandbox.io/s/kxsqg?file=/demo.js)发生这种情况的原因是.MuiTabs根类中存在溢出：隐藏属性。推翻它应该可以解决问题。