MUI 中的嵌套网格会导致不需要的行间距

Question

我正在尝试制作嵌套网格，一个有两个 div 的网格，一个在左侧，另一个在右侧，在左侧 div 内，我想要一个网格系统，我想添加自定义行间距，但没有添加任何与行间距相关的内容，MUI 给了我行间距，这可能是什么问题？

import React from 'react'
// MUI
import Box from '@mui/material/Box'
import Container from '@mui/material/Container'
import Grid from '@mui/material/Grid'
import TextField from '@mui/material/TextField'
import Button from '@mui/material/Button'
import Paper from '@mui/material/Paper'
import Typography from '@mui/material/Typography'

export default function Login() {
  return (
    <>
      <Box className="login-page__bg">
        <Container sx={{ py: 5 }}>
          <Paper elevation={2}>
            <Grid container>
              <Grid item container md={6}>
                {/* <Container sx={{ py: 5 }}> */}
                <Grid item sm={12}>
                  <Typography variant="h4" sx={{ fontWeight: 'bold' }}>
                    Login to your account
                  </Typography>
                </Grid>
                <Grid item sm={12}>
                  <TextField label="Your Email" type="email" variant="standard" fullWidth />
                </Grid>
                <Grid item sm={12}>
                  <TextField label="Password" type="password" variant="standard" fullWidth />
                </Grid>
                <Grid item sm={12}>
                  <Button variant="outlined" color="success" size="large" fullWidth>
                    Login
                  </Button>
                </Grid>
                {/* </Container> */}
              </Grid>

              <Grid item md={6} sx={{ display: { xs: 'none', md: 'block' } }}>
                <Box className="login-page__rightBgimg" />
              </Grid>
            </Grid>
          </Paper>
        </Container>
      </Box>
    </>
  )
}

Answer 1

因为在左侧网格中，您已将所有元素添加到单独的网格中，并且网格有一个属性可以调整。只需尝试删除网格并改用 div。

Answer 2

在网格中创建一个主 div，然后在主 div 中再次创建子 div。之后，您可以调整行大小甚至 main div.

的位置

Answer 3

回答我自己的问题。

答案总结：不要同时使用container和item属性，如果需要，嵌套在单独的网格组件。

是的，这是 MUI 中的一个错误，我设法通过将 item 与 container 分开来修复它。

对于任何面临同样问题的人。我能够通过在一个项目中嵌套一个容器来修复它。我正在做的是我在同一个网格组件上有两个道具（容器、项目）。

解决此问题的方法是将它们嵌套在一起，而不是将它们排成一行：

现在的工作代码：

    <>
      <Box className="login-page__bg">
        <CssBaseline />
        <Container sx={{ py: 5 }}>
          <Paper elevation={3}>
            <Grid container>
              <Grid item sm={12} md={6}>
                <Container sx={{ py: 5 }}>
                  <Grid container rowSpacing={4}>
                    <Grid item xs={12}>
                      <Typography sx={{ fontWeight: 'bold' }} variant="h5">
                        Login To Your Account
                      </Typography>
                    </Grid>
                    <Grid item xs={12}>
                      <TextField label="Your Email" type="email" variant="standard" fullWidth />
                    </Grid>
                    <Grid item xs={12}>
                      <TextField label="Password" type="password" variant="standard" fullWidth />
                    </Grid>
                    <Grid item xs={12}>
                      <Button variant="outlined" color="success">
                        Login
                      </Button>
                    </Grid>
                  </Grid>
                </Container>
              </Grid>
              <Grid item sm={false} md={6}>
                <div className="login-page__rightBgimg" />
              </Grid>
            </Grid>
          </Paper>
        </Container>
      </Box>
    </>

或彩色图片：

MUI 中的嵌套网格会导致不需要的行间距

Nesting grids in MUI results in an unwanted row spacing

reactjs

material-ui