[TabPanel] add `disableGutters`

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 🔦