如何在 Material UI (v5) Grid 中居中垂直分隔线？

Question

我正在尝试将两个居中的段落放入一列<Grid>，并用垂直的<Divider> 分隔。我将分隔线添加为网格项目，但分隔线在两段之间显示在右侧而不是中心对齐。这是我的代码：

<Grid item container direction="row" spacing={{ xs: 1, md: 3 }}>
  <Grid item xs={5}>
    <Typography variant="body2" align="center">
      Paragraph A text
    </Typography>
  </Grid>
  <Grid item xs={2}>
    <Divider orientation="vertical" />
  </Grid>
  <Grid item xs={5}>
    <Typography variant="body2" align="center">
      Paragraph B text
    </Typography>
  </Grid>
</Grid>

使用此代码，垂直分隔线向右对齐。如果我将justifyContent="center" 添加到容器网格中，则没有任何变化，我假设因为分隔线是右边框。我想我需要以某种方式添加 padding-right，但要计算它以响应不同的屏幕宽度。任何帮助将不胜感激！

Answer 1

您需要删除spacing={{ xs: 1, md: 3 }} 或更改它 并为更改分隔线方向使用网格中的容器：

   <Grid item container direction="row" >
            <Grid item xs={5}>
                <Typography variant="body2" align="center">
                    Paragraph A text
                </Typography>
            </Grid>
            <Grid item xs={2}
                  container
                  direction="row"
                  justifyContent="center"
                  alignItems="center"
            >
                <Divider orientation="vertical" style={{height:'100%',width:'1px'}}/>
            </Grid>
            <Grid item xs={5}>
                <Typography variant="body2" align="center">
                    Paragraph B text
                </Typography>
            </Grid>
</Grid>

codesandbox