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

我遇到了同样的问题并发现了一个技巧：在您的 Divider 中添加一个负的右边距

<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>

Answer 2

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

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

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

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>

这对我来说是一个干净、透明的解决方法，它可以让网格按预期流动。

Answer 4

以上这些解决方案都不适合我，所以我最终通过显示右侧左边框来模拟分隔器（您显然也可以通过显示左侧右边框来做到这一点），具有与 Divider 相同的 CSS 属性。这是一个小例子：

  <Grid
    container
    direction="row"
    justifyContent="space-evenly"
    alignItems="top"
  >
    <Grid
      item
      xs={6}
      style={{
        paddingRight: '10px',
      }}
      Left Side
    </Grid>
    <Grid
      item
      xs={6}
      style={{
        paddingLeft: '10px',
        borderStyle: 'solid',
        borderColor: 'rgba(0, 0, 0, 0.12)',
        borderWidth: '0 0 0 1px'
      }}
    >
      Right Side
    </Grid>
  </Grid>

Answer 5

请注意，您总共将 14 列传递到网格容器，至少在沙箱上是这样。无论如何，有时它会发生在 12 列中，我可以在最后一个网格项处传递空断点道具，甚至对于您的情况下的所有网格项来说：

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**>
          <Typography variant="h6" component="h2">
            third value
          </Typography>
        </Grid>
      </Grid>
    </div>
  );
}

这会告诉项目占用所有可用空间。 问题在于，给 12 列您正在稳定 100% 的可用空间，并添加一个分隔线，然后您就有 100% + 1px。通常没有网格，你需要设置一个calc(100% - 1px)。