Overriding the material-UI style padding and margin

Question

So i have tab component with content on it, but it seems inside the tabpanel i take padding and margin a lot, i try to override it to decrease the margin and padding... but it doesn't work.. ,i have try some recomendation on stackoverflow but it seems dont help at alll here how its look:

here is my code:

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 { DataGrid, GridToolbar } from "@mui/x-data-grid";
import { useDemoData } from "@mui/x-data-grid-generator";
import { makeStyles } from "@mui/styles";

const VISIBLE_FIELDS = ["name", "rating", "country", "dateCreated", "isAdmin"];

const Calculation = () => {
  const [value, setValue] = React.useState("1");

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };
  const { data } = useDemoData({
    dataSet: "Employee",
    visibleFields: VISIBLE_FIELDS,
    rowLength: 100,
  });
  const useStyles = makeStyles((theme) => ({
    root: {
      padding: "0px",
    },
  }));
  return (
    <div className="p-2">
      <div className="p-2">
        <form>
          <label
            for="search"
            className="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white"
          >
            Search
          </label>
          <div className="relative">
            <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
              <svg
                aria-hidden="true"
                className="w-5 h-5 text-gray-500 dark:text-gray-400"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                ></path>
              </svg>
            </div>
            <input
              type="search"
              id="search"
              class="block w-full p-4 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-green-500 focus:border-green-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-green-500 dark:focus:border-green-500"
              placeholder="Search By SKU"
              required
            />
            <button
              type="submit"
              class="text-white absolute right-2.5 bottom-2.5 bg-green-700 hover:bg-green-800 focus:ring-4 focus:outline-none focus:ring-green-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800"
            >
              Search
            </button>
          </div>
        </form>
      </div>{" "}
      <div className="text-left pl-4 pb-4 font-bold text-3xl">
        <h2>Detail SKU</h2>
      </div>
      <Box sx={{ width: "100%", typography: "body1" }}>
        <TabContext value={value} index={0} classes={{ root: useStyles.tab }}>
          <Box sx={{ borderColor: "divider", p: 0 }}>
            <TabList
              index={0}
              classes={{ root: useStyles.tab }}
              onChange={handleChange}
              variant="scrollable"
              scrollButtons="auto"
              aria-label="scrollable auto tabs example"
            >
              <Tab label="BOM" value="1" />
              <Tab label="Routing" value="2" />
              <Tab label="Depre" value="3" />
              <Tab label="OMC" value="4" />
            </TabList>
          </Box>
          <TabPanel value="1">
            <div className="m-0 p-0" style={{ height: 400, width: "100%" }}>
              <DataGrid {...data} components={{ Toolbar: GridToolbar }} />
            </div>
          </TabPanel>
          <TabPanel value="2">Routing</TabPanel>
          <TabPanel value="3">Depre</TabPanel>
          <TabPanel value="4">OMC</TabPanel>
        </TabContext>
      </Box>
    </div>
  );
};
export default Calculation;

Any help on this? will appreciate any try...

Answer 1

I think you should add style={{ padding: 0}} on the TabPanle component instead of the div.