MuiTabPanl-Root Padding remove using CSS or Mui Styles? - reactjs

Question

I want to override the MUI Tab Panel Padding. I override the .MuiTabPanel-Root Class globally and inline style. But, the Tab Panel is not override. Screenshot and Code Below attached.
I want to remove the padding from the MuiTabPanel-Root class padding.
When I applied the padding as 0px in "MuiTabPanel-Root" class is not working.
But, When I remove the padding from this class .css-13xfq8m-MuiTabPanel-root Tab panel padding was removed. I don't know how to override the "TabPanel-root padding" using react js
CSS Global :
.MuiTabPanel-root{
padding: 0px;
}
CSS Inline :
<TabPanel value="1" classes={{
"& .MuiTabPanel-root": {
padding: "0px",
},
}}>
Full Code Tab Component :
import * as React from 'react';
import Box from '#mui/material/Box';
import Tab from '#mui/material/Tab';
import TabContext from '#mui/lab/TabContext';
import TabList from '#mui/lab/TabList';
import TabPanel from '#mui/lab/TabPanel';
import HistoryTable from '../HistoryTable/HistoryTable';
import { Button } from '#mui/material';
import SampleTable from './SampleTable';
import './TradeTab.css';
import { MuiThemeProvider, createTheme } from "#material-ui/core/styles";
import { orange, pink, green } from "#material-ui/core/colors";
export default function SampleTabControl() {
const theme = createTheme({
overrides: {
MuiTabs: {
indicator: {
backgroundColor: 'red'
}
},
MuiTab: {
root: {
"&:hover": {
backgroundColor: pink[100],
color: pink[700]
},
".MuiTabPanel-root":{
padding:0
}
},
selected: {
backgroundColor: orange[100],
color: orange[700],
"&:hover": {
backgroundColor: 'green',
color: green[700]
}
}
}
}
});
const [value, setValue] = React.useState('1');
const handleChange = (event, newValue) => {
setValue(newValue);
};
return (
<MuiThemeProvider theme={theme}>
<Box sx={{ width: '100%', typography: 'body1'}}>
<TabContext value={value}>
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
<TabList onChange={handleChange} aria-label="lab API tabs example">
<Tab label="Item One" value="1" style={{color: "white", fontWeight:"500"}}
sx={{backgroundColor: value=="1" ? "blue" : "lightgrey" }}/>
<Tab label="Item Two" value="2" style={{color: "white", fontWeight:"500", marginLeft:'10px'}}
sx={{backgroundColor: value=="2" ? "blue" : "lightgrey"}}/>
<Button variant='outlined' style={{marginLeft:'100px', size:'small', height:'30px', marginTop:"10px"}}>1X</Button>
</TabList>
</Box>
<TabPanel value="1" classes={{
"& .MuiTabPanel-root": {
padding: "0px",
},
}}>
<SampleTable/>
</TabPanel>
<TabPanel value="2">Item Two</TabPanel>
<TabPanel value="3">Item Three</TabPanel>
</TabContext>
</Box>
</MuiThemeProvider>
);
}
Full Code Table :
import React, { useMemo } from 'react';
import MaterialReactTable from 'material-react-table';
import { makeStyles } from '#mui/styles';
//nested data is ok, see accessorKeys in ColumnDef below
const data = [
{
name: {
firstName: 'John',
lastName: 'Doe',
},
address: '261 Erdman Ford',
city: 'East Daphne',
state: 'Kentucky',
},
{
name: {
firstName: 'Jane',
lastName: 'Doe',
},
address: '769 Dominic Grove',
city: 'Columbus',
state: 'Ohio',
},
{
name: {
firstName: 'Joe',
lastName: 'Doe',
},
address: '566 Brakus Inlet',
city: 'South Linda',
state: 'West Virginia',
},
{
name: {
firstName: 'Kevin',
lastName: 'Vandy',
},
address: '722 Emie Stream',
city: 'Lincoln',
state: 'Nebraska',
},
{
name: {
firstName: 'Joshua',
lastName: 'Rolluffs',
},
address: '32188 Larkin Turnpike',
city: 'Charleston',
state: 'South Carolina',
},
];
const SampleTable = () => {
//should be memoized or stable
const columns = useMemo(
() => [
{
accessorKey: 'name.firstName', //access nested data with dot notation
header: 'First Name',
},
{
accessorKey: 'name.lastName',
header: 'Last Name',
},
{
accessorKey: 'address', //normal accessorKey
header: 'Address',
},
{
accessorKey: 'city',
header: 'City',
},
{
accessorKey: 'state',
header: 'State',
},
],
[],
);
return <MaterialReactTable columns={columns} data={data} style={{padding:'0px'}}/>;
};
export default SampleTable;
I try to remove the padding for "MuiTabPanel-root".
Expected Result :
Remove the padding from "MuiTabPanel-Root"