material-ui [TabPanel] add disableGutters

fcy6dtqo  于 4个月前  发布在  其他
关注(0)|答案(4)|浏览(48)

重复问题

  • 我搜索了现有的问题

最新版本

  • 我测试了最新版本

总结 💡

在我的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>

动机 🔦

带有和不带填充的屏幕截图,以说明我如何从这个特性中受益

cetgtptt

cetgtptt1#

同意,感觉这默认设置很奇怪。组件在实验室里,所以技术上我们可以做出破坏性改变,但我会等待看看是否更多人遇到了这个问题。

brqmpdu1

brqmpdu12#

我也遇到过这个问题,希望不要有填充或者disableGutters属性!

hs1rzwqc

hs1rzwqc3#

对我来说,这将是一个很好的补充,可以更轻松地控制样式!

jecbmhm3

jecbmhm34#

同样的问题,想要移除选项卡的填充

相关问题