[TabPanel] add disableGutters

[MonstraG]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

Under my TabPanel's I display tables or lists, or some content that already includes padding.

It would be nice to be able to easily disable TabPanel padding with disableGutters property, like I can already do that on Toolbar or some other components.

Actually, so far, in 100% of the cases I wanted to remove the padding, so I would prefer disableGutters being true by default, but that would be a breaking change.

Workaround:

const myTheme = {
	components: {
		MuiTabPanel: {
			styleOverrides: {
				root: {
					paddingLeft: 0,
					paddingRight: 0
				}
			}
		}
	}
}

Examples 🌈

<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>

Motivation 🔦

Screenshots with and without padding to illustrate how I would benefit from this feature

[mnajdova]

Agree, it feels strange that this is the default. The component is in the lab so technically we could make breaking chages, but I will wait to see if this is an issue that more people hit.

[ellinornk]

I've also come across this and would appreciate no padding or the disableGutters property!

[LauraLeGoff]

Same for me, it would be a nice addition and would allow easier control over the styling !

[SandersTDavid]

Same issue, would like to remove padding from tabs