Material-UI 中的 Box 和 Grid 有什么区别？答案

【问题标题】：What is the difference between Box and Grid in Material-UI?Material-UI 中的 Box 和 Grid 有什么区别？
【发布时间】：2020-10-25 21:49:16
【问题描述】：

Material-UI中Box和Grid有什么区别

何时使用每个

我对此感到困惑

【问题讨论】：

【解决方案1】：

简而言之：

Box 是div 的更强大、更方便和潜在的替代品。您可以将其更改为任何 HTML 元素（例如 span），但大多数情况下您会将其用作 div 替换。

Grid 是Grid Layout 的语法糖。

【讨论】：

【解决方案2】：

框

Box 组件用作大多数 CSS 实用程序需求的包装器组件。

Box 组件包装您的组件。它会创建一个新的 DOM 元素，默认为 <div>，可以通过组件属性进行更改。

假设您想改用<span>：

<Box component="span" m={1}>
  <Button />
</Box>

当更改可以隔离到新的 DOM 元素时，这非常有用。例如，您可以通过这种方式更改边距。

Material Design 响应式布局网格可适应屏幕尺寸和方向，确保布局之间的一致性。

网格在布局之间创建视觉一致性，同时允许跨多种设计的灵活性。 Material Design 的响应式 UI 基于 12 列网格布局。

工作原理

网格系统是用 Grid 组件实现的：

Box 和 Grid 上的文档

【讨论】：

【解决方案3】：

盒子

Box 组件用作大多数 CSS 实用程序需求的包装器组件。 Box 组件封装了 @material-ui/system 中公开的所有样式功能。它是使用 @material-ui/core/styles 的 styled() 函数创建的

网格

GridBox 是 Grid 的低级表示。除了低级笔记本表达式操作外，不需要直接使用 GridBox。在笔记本中，可以使用 GridBox 添加列，使用 .或者可以使用一个菜单项来开始构建一个 GridBox。

【讨论】：

【解决方案4】：

当您想要对多个项目进行分组并控制它们在页面上的外观时，请使用 Box。例如，您可以选取多个段落并使用框在它们周围放置边框。

使用 Grid 设置一个网格布局系统，以便在页面上按列组织内容。设计师将页面分为 12 列，其理念是让内容沿每列或每列组对齐更具视觉吸引力。这是一篇文章，提供了有关该主题的更多详细信息：https://www.interaction-design.org/literature/article/the-grid-system-building-a-solid-design-layout

【讨论】：

【解决方案5】：

网格在布局之间创建视觉一致性，同时允许跨多种设计的灵活性。 Material Design 的响应式 UI 基于 12 列网格布局。

网格系统是用 Grid 组件实现的：

它使用 CSS 的灵活框模块来实现高灵活性。有两种类型的布局：容器和项目。项目宽度以百分比设置，因此它们总是相对于其父元素是流动的和大小。项目具有填充以创建各个项目之间的间距。有五个网格断点：xs、sm、md、lg、xl。

盒子就是这样，一个盒子。它是一个包裹在其内容周围的元素，它本身不包含样式规则，也不会对视觉输出产生任何默认效果。但它是根据需要放置样式规则的地方。它不提供任何实际功能，只是用于控制分层标记结构中的样式的占位符。

我经常认为它在语义上类似于 JSX 空元素：

<>
    Some elements here
</>

但只有一些 Material UI 功能：

 <Box component="span" m={1}>
     <Button />
 </Box>

【讨论】：