如果你检查截图中标记的div，你会发现填充样式与MuiTabPanel-root有关。在Material's official website上，他们引入了一些方法来覆盖组件的样式。下面是你可以做的一个方法，用规则名称覆盖组件的样式。你也可以在他们网站的Component API部分找到每个组件的规则名称。

const useStyles = makeStyles({
  tabPanelRoot: {
    padding: 0
  },
});

用法：

export default function App() {
    const classes = useStyles();
    return(
        ...
        <TabPanel value="1" classes={{ root: classes.tabPanelRoot}}>
        ...
    )
}

参见编辑后的代码here。

因为父容器不是全高的，所以tanpanel也不是全高的。要使全高的tabpanel传递一个类到tabpanel的根。传递所需的高度到tabpanelRoot类。（这里我忽略了appbar的高度）

export default function App() {
  const classes= useStyles()
  const [value, setValue] = React.useState("1");

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };
  return (
    <Box style={{height:'100%', background:'red'}}>
      <TabContext value={value}>
        <AppBar position="static">
          <TabList
            variant="scrollable"
            onChange={handleChange}
            aria-label="simple tabs example"
          >
            <Tab label="Business Info" value="1" icon={<ContactMailIcon />} />
            <Tab label="Financial" value="2" icon={<MonetizationOnIcon />} />

            <Tab label="Participants" value="3" icon={<AccessibilityIcon />} />
          </TabList>
        </AppBar>

        <Box  style={{height:'100%', background:'red'}}>
          <TabPanel value="1" classes={{root:classes.tabpanelRoot}}>
            <Box style={{height:'100%', backgroundColor: "red" }}>Content 1</Box>
          </TabPanel>
          <TabPanel value="2" classes={{root:classes.tabpanelRoot}}>
            <Box style={{height:'100%', backgroundColor: "green" }}>Content 2</Box>
          </TabPanel>
          <TabPanel value="3" classes={{root:classes.tabpanelRoot}}>
            <Box style={{height:'100%', backgroundColor: "blue" }}>Content 3</Box>
          </TabPanel>
        </Box>
      </TabContext>
    </Box>
  );
}

const useStyles = makeStyles((theme) => ({
  tabpanelRoot: {
    padding:0,
    height: `calc(100vh - 52px)`
  },
}));

下面是代码和框链接：-https://codesandbox.io/s/angry-noether-huxvz

试试这个
使用useStyle挂钩更新代码。
App.js

import React from "react";
import "./styles.css";
import AppBar from "@material-ui/core/AppBar";
import Tab from "@material-ui/core/Tab";
import TabContext from "@material-ui/lab/TabContext";
import TabList from "@material-ui/lab/TabList";
import TabPanel from "@material-ui/lab/TabPanel";
import Box from "@material-ui/core/Box";
import MonetizationOnIcon from "@material-ui/icons/MonetizationOn";
import ContactMailIcon from "@material-ui/icons/ContactMail";
import AccessibilityIcon from "@material-ui/icons/Accessibility";
import { makeStyles } from "@material-ui/core";

const useStyles = makeStyles({
  appContainer: {
    display: "flex",
    flexDirection: "column",
    width: "100vw",
    height: "100vh"
  },

  container: {
    display: "flex",
    height: "100%",
    width: "100%"
  },
  panel: {
    width: "100%"
  }
});
export default function App() {
  const [value, setValue] = React.useState("1");
  const classes = useStyles();
  const handleChange = (event, newValue) => {
    setValue(newValue);
  };
  return (
    <Box className={classes.appContainer}>
      <TabContext value={value}>
        <AppBar position="static">
          <TabList
            variant="scrollable"
            onChange={handleChange}
            aria-label="simple tabs example"
          >
            <Tab label="Business Info" value="1" icon={<ContactMailIcon />} />
            <Tab label="Financial" value="2" icon={<MonetizationOnIcon />} />

            <Tab label="Participants" value="3" icon={<AccessibilityIcon />} />
          </TabList>
        </AppBar>

        <Box className={classes.container}>
          <TabPanel value="1" className={classes.panel}>
            <Box
              className={classes.container}
              style={{ backgroundColor: "red" }}
            >
              Content 1
            </Box>
          </TabPanel>
          <TabPanel value="2" className={classes.panel}>
            <Box style={{ backgroundColor: "green" }} className={classes.container} >Content 2</Box>
          </TabPanel>
          <TabPanel value="3" className={classes.panel}>
            <Box className={classes.container} style={{ backgroundColor: "blue" }}>Content 3</Box>
          </TabPanel>
        </Box>
      </TabContext>
    </Box>
  );
}

下面是沙箱链接-https://codesandbox.io/s/shy-voice-nih2s

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

export default function LabTabs() {
  const [value, setValue] = React.useState('1');

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <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" />
            <Tab label="Item Two" value="2" />
            <Tab label="Item Three" value="3" />
          </TabList>
        </Box>
        <TabPanel sx={{pl: 1,pt:1}} value="1">Item One</TabPanel>
        <TabPanel sx={{pl: 1,pt:1}} value="2">Item Two</TabPanel>
        <TabPanel sx={{pl: 1,pt:1}} value="3">Item Three</TabPanel>
      </TabContext>
    </Box>
  );
}