Material UI：如何在网格项目中定位项目？

Question

使用 MaterialUI 将图像定位在 <Grid item> 中时，最好的方法是什么？

这可以通过在网格项目中放置一个 div 来完成，使其宽度/高度为 100%，应用 flexbox，然后执行 align-items 和 justify-content，但我认为这违背了 Grid 系统的全部目的，我认为在 Grid 中放置某些东西不应该有那么多代码。

示例： https://codesandbox.io/s/nervous-lamport-rvrm5?file=/src/App.js

Answer 1

Grid 的主要好处是：

1. 具有 12 列的灵活网格系统
2. 响应能力
3. React 风格的语法（道具）
4. 使用CSS flex 语法的自定义布局

但在内心深处，它仍然使用CSS flex 进行布局

如果是 CSS，要让 div 容器中的元素居中，您只需要：

1. 制作容器display: flex
2. 将justify-content: center添加到容器中

考虑到这一点，我们可以用 Grid 翻译成

  {/* Lets try to center the photo */}
  <Grid item container xs={6} justify="center">
    <img src="https://picsum.photos/100" alt="placeholder"></img>
  </Grid>

container 是将display: flex 添加到网格中

justify="center" 是将justify-content: center 添加到网格中

输出：

没有更多的 className 和更多的 React 道具。