何时使用网格项与何时不使用网格项来对齐和对齐

Question

我很好奇我何时应该使用Grid item来利用Grid container或justify之类的alignItems道具。我的印象是，这些属性只能应用于Grid item内部的Grid container。但是，从我的示例来看，情况似乎并非如此（请参阅：“选项二”。

例如，让我们考虑一个简单的场景：我想要一种显示三个Typography文本的方法，一个接一个，另一个之间，中间留有一些空格。

选项一： https://codesandbox.io/s/naughty-tharp-0tof1

export default function App() {
  return (
    <Grid
      container
      direction="row"
      justify="space-between"
      style={{ minHeight: "100px", backgroundColor: "yellow" }}
    >
      <Grid item>
        <Typography> First text </Typography>
      </Grid>
      <Grid item>
        <Typography> Second text </Typography>
      </Grid>
      <Grid item>
        <Typography> Third text </Typography>
      </Grid>
    </Grid>
  );
}

选项二： https://codesandbox.io/s/romantic-northcutt-kjbef

export default function App() {
  return (
    <Grid
      container
      direction="column"
      justify="space-between"
      style={{ minHeight: "100px", backgroundColor: "yellow" }}
    >
      <Typography> First text </Typography>
      <Typography> Second text </Typography>
      <Typography> Third text </Typography>
    </Grid>
  );
}

为什么justify和direction像选项二那样直接在Typography上工作？他们不应该只在Grid item上工作吗？

Answer 1

Ciao，Grid css将应用于Grid的所有子代（如果子代为Grid item或Typography，则独立使用）。

为更好地解释我的意思，请检查您的代码和框示例：

选项一：

选项二：

在这两种情况下，div父亲（MuiGrid-root）都会将其样式应用于孩子。