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

Question

正如我在问题中提到的： Container vs Grid has attribute container in Material-UI有什么不同？

非常感谢！

Answer 1

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

容器

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

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

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

网格

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

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

在检查了这些差异之后，在我看来， <Container>用于包含所有组件的外包装，而<Grid container>可用于创建列布局（12 列），这实际上是不可能的在<Container>的情况下。