Material-ui：使用 <Divider> 打破网格

Question

所以我有这个烦人的问题，我找不到结果。我是 material-ui 的新手，感觉好像我在这里遗漏了一些东西......

我只想要网格项之间的分隔符，而不破坏网格的顺序。我错过了什么？

沙盒：https : //vpbyd.csb.app/

import React from "react";
import "./styles.css";
import {Grid, Typography, Divider} from '@material-ui/core'

export default function App() {
  return (
    <div className="App">
       <Grid container spacing={3}>

<Grid item xs={4}> 
<Typography variant="h5" component="h2">
One
</Typography>
</Grid>
<Grid item xs={4}> 
<Typography variant="h5" component="h2">
  Two
  </Typography>
</Grid>
<Grid item xs={4}> 
<Typography variant="h5" component="h2">
  Three
  </Typography>
</Grid>

</Grid>

<Grid container spacing={0} alignItems="center">

<Grid item xs={4}> 
<Typography variant="h6" component="h2">
first value
</Typography>
</Grid>
<Divider orientation="vertical" flexItem/>
<Grid item xs={4}> 
<Typography variant="h6" component="h2">
second value
</Typography>
</Grid>
<Divider orientation="vertical" flexItem/>
<Grid item xs={4}> 
<Typography variant="h6" component="h2">
third value
</Typography>
</Grid>

</Grid>
    </div>
  );
}

Answer 1

尝试将分隔线放入其自己的网格容器内。

<Grid item xs={2}> 
   <Divider orientation="vertical" flexItem/>
</Grid>

Material ui 网格使用 Flexbox，因此将不具有正确属性的项目放入其中会弄乱网格。

Answer 2

我遇到了同样的问题，并找到了一个技巧：为您的分隔线添加一个负的右边距

<Grid item xs={4}> 
    <Typography variant="h6" component="h2">
        first value
    </Typography>
</Grid>
<Divider orientation="vertical" flexItem style={{marginRight:"-1px"}} />
<Grid item xs={4}> 
    <Typography variant="h6" component="h2">
        second value
    </Typography>
</Grid>