Material:使用<Divider>破坏网格

Question

所以我有个烦人的问题我找不到结果。我对材料不熟悉，感觉好像我错过了什么.

我只想在网格项之间设置一个分隔符，而不是破坏网格的顺序。我遗漏了什么？

沙箱：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网格使用的是柔性盒，因此在其中删除不具有正确属性的项会使网格陷入混乱。

Answer 2

我有同样的问题，并发现了一个窍门:给你的分区增加一个负的右边距。

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

Answer 3

对我来说，一个很好的通用解决方案是添加这种全局样式。

.MuiGrid-container > .MuiDivider-vertical.MuiDivider-flexItem {
  margin-right: -1px;
}

与将JSX属性flexItem添加到Divider相结合

<Grid container>
  <Grid item xs={4}>
    ...
  </Grid>
  <Divider flexItem orientation="vertical" />
  <Grid item xs={8}>
    ...
  </Grid>
</Grid>

这是一个干净的，透明的解决办法，使网格按预期运行。