MUI 中的框与堆栈

Question

我最近开始在我的 React 项目中使用 MUI。有两个布局组件我很困惑，即 Stack 和 Box

我什么时候应该使用 Stack 而不是 Box？

我知道盒子的用途。

但我不确定何时使用 Stack 组件以及它们之间的区别是什么？

Answer 1

Box： Box 组件充当大多数 CSS 实用程序需求的包装组件。Box 组件封装了@mui/system.

堆栈：堆栈就像一个弹性容器。Stack 组件管理直接子项沿垂直或水平轴的布局，每个子项之间具有可选的间距和/或分隔线。

堆栈的用法：

1. Stack 涉及一维布局，而 Grid 处理二维布局。默认方向是垂直堆叠子项的列。

2. 默认情况下，Stack 将项目垂直排列在一列中。但是，direction 属性也可用于将项目水平放置在一行中。

3. 使用divider属性在每个子元素之间插入一个元素。这对于 Divider 组件特别有效。

4. 您可以根据活动断点切换方向或间距值。

参考： https: //mui.com/components/stack/