material-ui [系统] 改进布局组件的使用文档：Container, Grid, Box, Stack

ecbunoof 于 6个月前发布在其他

关注(0)|答案(2)|浏览(49)

如何使用Stack、Container、Box来设置整个页面的布局？这是正确的吗？关于gird呢？
grid
container
stack
box
component
box
stack
container
grid

我只能使用div,不能使用任何stack、container或box吗？我需要为每个组件和页面应用网格吗？

在哪里以及在哪个文件中设置整个页面的网格？

搜索关键词:stack, box, container, grid

2条答案

感谢您的反馈 @thuphan27379 !我完全同意文档在描述这些组件的使用案例方面是缺乏的。事实上，我目前正在修订 Box 页面( #40622 )和 Container 页面( #41074 ),我计划接下来修订 Grid 和 Stack !
为了尽可能快速地回答您的问题：

将 Container 作为应用程序的顶级 Package 器使用—换句话说，它应该靠近应用程序的 <body> 标签，并且像 <body> 一样，应该只有一个
在您的 Container 中使用 Grid 来安排 Box 和 Stack 形成布局
将 Stack 作为水平或垂直轴上的排列内容的 Package 器使用
将 Box 用于所有其他通用 Package 目的—例如一个 <div> ,它可以访问您的主题和其他 MUI 特定功能
因为 Box 是通用 Package 器，您也可以在其中放置一个 Grid 或一个 Stack —但是将一个 Container 放在一个 Box 中会很奇怪，因为 Container 的目的是在 DOM 树的顶部
您可以根据需要将任何这些组件放入其中—使用布局组件而不是纯 HTML 的主要好处是您可以获得额外的自定义工具(属性、主题令牌)

希望这有所帮助！如果您有任何其他问题，请随时提问—这将有助于我们更好地修订这些文档供所有人使用。

非常感谢！