reactjs - Material-UI 中的 Container 与 Grid 容器有什么不同？

Question

正如我在问题中提到的：Container vs Gridcontainer在 Material-UI 中有什么不同？

非常感谢！

标签： reactjsgridmaterial-ui

Answer 1

我访问了材料 UI 的文档，这是我在检查这些时发现的：

容器

当您<Container>在代码中使用时，以下样式将应用于您的<Container>组件。

正如您在上面的屏幕截图中看到的那样，存在两个重要的属性，

• display: block
• max-width: 600px（在媒体查询中，因此它取决于视口宽度）

网格

当您在带有属性容器的代码中使用时，将应用以下样式，

正如您在上面看到的，它利用 flexbox 布局来保存列，这对于保存弹性项目（即列）很有用。它还根据您指定的间距类型设置最大宽度。

在检查了这些差异之后，在我看来，<Container>它们用于包含所有组件的外包装，而<Grid container>可用于创建列布局（12 列），这在<Container>.