材质UI GridView无法正确显示

Question

我正在TabView组件内使用MUI网格视图，如下所示：

import React from 'react';
import PropTypes from 'prop-types';
import AppBar from '@material-ui/core/AppBar';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';
import Grid from "@material-ui/core/Grid";
import tabletViewStyles from "./TabViewStyles";
import gridViewStyles from './GridViewStyles';

import Form from "../finance-form/Form";

function TabPanel(props) {
  const {children, value, index, ...other} = props;

  return (
    <div
      role="tabPanel"
      hidden={value !== index}
      id={`nav-tabpanel-${index}`}
      aria-labelledby={`nav-tab-${index}`}
      {...other}
    >
      {value === index && (
        <Box p={3}>
          <Typography>{children}</Typography>
        </Box>
      )}
    </div>
  );
}

TabPanel.propTypes = {
  children: PropTypes.node,
  index: PropTypes.any.isRequired,
  value: PropTypes.any.isRequired,
};

function a11yProps(index) {
  console.log(index);
  return {
    id: `nav-tab-${index}`,
    'aria-controls': `nav-tabpanel-${index}`,
  };
}

function LinkTab(props) {
  return (
    <Tab
      component="a"
      onClick={(event) => {
        event.preventDefault();
      }}
      {...props}
    />
  );
}

export default function TabViewMenu() {
  const classes = tabletViewStyles;
  const [value, setValue] = React.useState(0);

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

  return (
    <div className={classes.root}>
      <AppBar position="static" color="default">
        <Tabs
          value={value}
          onChange={handleChange}
          indicatorColor="primary"
          textColor="primary"
          scrollButtons="auto"
        >
          <LinkTab label="Page One" href="/finance-options" {...a11yProps(0)} />
          <LinkTab label="Page Two" href="/trade-in" {...a11yProps(1)} />
        </Tabs>
      </AppBar>
      <TabPanel value={value} index={0}>
          <Grid container spacing={12}>
            <Grid item xs={4} sm={4}>
              <Form/>
            </Grid>
            <Grid item xs={4} sm={4}>
              <Typography>Test</Typography>
            </Grid>
            <Grid item xs={4} sm={4}>
              <Typography>Test two</Typography>
            </Grid>
          </Grid>
      </TabPanel>
      <TabPanel value={value} index={1}>
        Page Two
      </TabPanel>
    </div>
  );
}

由于某种原因，一旦组件已在浏览器中呈现，则网格视图似乎嵌套在Box组件内。有没有一种方法可以将两个网格视图列从第一个移开？我知道GridView在TabPanel中作为“孩子”传递。但是，有一种方法可以使组件呈现不同的外观吗？