重复问题
- 我搜索了现有的问题
最新版本
- 我测试了最新版本
总结 💡
在我的TabPanel中,我显示表格或列表,或者一些已经包含填充的内容。如果能像我在Toolbar或其他组件上那样轻松地使用disableGutters
属性禁用TabPanel的填充,那就太好了。实际上,到目前为止,在100%的情况下,我都想要移除填充,所以我更希望默认情况下disableGutters为true,但那将是一个破坏性的变化。
解决方法:
const myTheme = {
components: {
MuiTabPanel: {
styleOverrides: {
root: {
paddingLeft: 0,
paddingRight: 0
}
}
}
}
}
示例 🌈
<TabContext value={tab}>
<Box sx={{ borderBottom: 1, borderColor: "divider" }}>
<TabList onChange={(_, newValue: "charts" | "table") => setTab(newValue)}>
<Tab label="Charts" value="charts" />
<Tab label="Table" value="table" />
</TabList>
</Box>
<TabPanel value="1">
<Charts />
</TabPanel>
<TabPanel value="2" disableGutters>
<Table /> ^^^^^^^^^^^^^^
</TabPanel>
</TabContext>
动机 🔦
带有和不带填充的屏幕截图,以说明我如何从这个特性中受益
4条答案
按热度按时间cetgtptt1#
同意,感觉这默认设置很奇怪。组件在实验室里,所以技术上我们可以做出破坏性改变,但我会等待看看是否更多人遇到了这个问题。
brqmpdu12#
我也遇到过这个问题,希望不要有填充或者
disableGutters
属性!hs1rzwqc3#
对我来说,这将是一个很好的补充,可以更轻松地控制样式!
jecbmhm34#
同样的问题,想要移除选项卡的填充