从材质 UI 网格系统中删除填充

时间:2021-06-21 16:39:54

标签: javascript reactjs material-ui react-grid-layout

希望你的一天一切顺利。我是 Material UI 的新用户,我正在努力构建我的第一个个人资料页面(下图)。

enter image description here

当我接近构建这个页面时,我正在努力创建一个网格系统,允许关于部分直接位于三个面板下方(见下图)。

enter image description here

如何删除 about 部分和三个面板之间的填充(代码如下)?

return (
    <>
      <Helmet>
        <title>Dashboard: Project Details | Material Kit Pro</title>
      </Helmet>
      <Box
        sx={{
          backgroundColor: 'background.default',
          minHeight: '100%',
          py: 8
        }}
      >
        <Container >
          <AppBar></AppBar>
          <Grid container spacing={1}>
            <Grid item xs={12} md={3}>
              <Box
                style={{ height: '100%', width: '100%'}}
              >
                <WritersSidePanel />
              </Box>
            </Grid>
            <Grid item xs={12} md={9}>
              <WritersPageTopPanel />
            </Grid>
              <Box style={{ marginDown: '90%'}}>
                <Grid item xs={12} container
                      direction="column"
                      alignItems="flex-end"
                      justify="flex-end">
                <Box
                  style={{ width: '75%', height: '100%'}}
                >
                  <AboutSection description={description} />
                  </Box>
                </Grid>
              <Grid item xs={12} container
                    direction="column"
                    alignItems="flex-end"
                    justify="flex-end">
                <Box
                  style={{ width: '75%'}}
                >
                  <SampleStory description={description} />
                </Box>
              </Grid>
            </Box>
          </Grid>
        </Container>
      </Box>

    </>
  );
};

0 个答案:

没有答案