MUI Box 组件有什么用？

Question

尽我所能，我无法理解 这里 给出的描述。

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

CSS 实用程序需要什么？

这个组件的用例是什么？它解决了什么问题？你如何使用它？

我发现 MUI 文档非常有限且难以理解。我用谷歌搜索过，但通常只找到关于如何使用 Material UI 的相当轻量级的博客文章。除了帮助理解这个组件之外，我真的很感激任何好的资源（如果存在这样的东西，就像他们自己的文档的更好版本一样）。

（背景，我一般了解React、JS、CSS、HTML等，后两者实力较弱）。

原文由 Xavier Taylor 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

编辑：这是在 MUI v4 天写的。在 MUI v5 中，所有 MUI 组件都允许您通过 sx 定义 CSS 样式，而不仅仅是 Box ；但是 Box 也接受顶层的样式道具，以及 sx 。

其他答案并不能真正解释使用 Box 的动机。

Box 渲染一个 <div> 你可以通过 React props 直接应用 CSS 样式，为了方便，因为像单独的 CSS 文件、CSS-in-JS 或内联样式这样的替代方案可以打字更麻烦，使用更麻烦。

例如，考虑这个使用 JSS 的组件：

 import * as React from 'react'

import { makeStyles } from '@material-ui/styles'

const useStyles = makeStyles(theme => ({
  root: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    padding: theme.spacing(1),
  }
}))

const Example = ({children, ...props}) => {
  const classes = useStyles(props);

  return (
    <div className={classes.root}>
      {children}
    </div>
  )
}

使用 Box 通过传递您想要的道具来执行此操作要短得多：

 import * as React from 'react'

import Box from '@material-ui/core/Box'

const Example = ({children}) => (
  <Box display="flex" flexDirection="column" alignItems="stretch" padding={1}>
    {children}
  </Box>
)

还要注意 padding={1} 是 theme.spacing(1) 的简写。 Box 为使用这样的 Material-UI 主题提供了各种便利。

在较大的文件中，从渲染元素到样式来回跳转可能比样式就在元素上更麻烦。

您 不想 使用 Box (MUI v4) 的情况：

• You want the enclosing component to be able to override styles by passing classes ( makeStyles enables this. <Example classNames={{ root: 'alert' }} /> would work in the makeStyles example ，但不是 Box 示例。）
• 您需要使用重要的选择器（例如 JSS 选择器： $root > li > a ， $root .third-party-class-name ）

原文由 Andy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

A Box 基本上是 div \* 类固醇。 Box 允许您将动态样式应用于其他正常的 div 非常快，就像内联样式（但它不是内联样式）。除此之外，它还与 MUI 主题进行了一流的集成：

 <Box
  sx={{
    bgcolor: 'primary.main',
    color: 'text.secondary',
    border: 4,
    borderRadius: 2,
    px: 2,
    fontWeight: 'fontWeightBold',
    zIndex: 'tooltip',
    boxShadow: 8,
  }}
>
  Box
</Box>

如果您需要使用普通的 div 执行上述操作，则必须使用 useTheme 获取 theme 对象并创建一个好的内联样式如果在任何地方都被滥用，请练习：

 <div
  style={{
    backgroundColor: theme.palette.primary.main,
    color: theme.palette.text.secondary,
    border: '4px solid black',
    borderRadius: theme.shape.borderRadius * 2,
    padding: `0 ${theme.spacing(2)}`,
    fontWeight: theme.typography.fontWeightBold,
    zIndex: theme.zIndex.tooltip,
    boxShadow: theme.shadows[8],
  }}
>
  div
</div>

Box 以及其他组件，如 Typography 或 Stack 还支持 系统属性，使您甚至可以将样式值传递给更短的顶级道具代码.在内部，系统属性被收集并与 sx 道具合并，因此它们是同一件事（有关更多详细信息，请参 见此 答案）

 <Box
  bgcolor="primary.main"
  color="text.secondary"
  border={4}
  borderRadius={2}
  px={2}
  fontWeight="fontWeightBold"
  zIndex="tooltip"
  boxShadow={8}
>
  Box
</Box>

因为 Box 利用 sx 道具，你还可以使用 sx 添加 响应值 等功能：

 <Box
  display={{
    xs: 'none',
    sm: 'block',
  }}
  width={{
    sm: 30,
    md: 50,
    lg: 100,
  }}
>

或者创建嵌套样式：

 <Box
  display='flex'
  sx={{
    '& > :not(:last-child)': {
      mr: 2 // maginRight: theme.spacing(2)
    },
    ':hover': {
      bgcolor: 'green'
    }
  }}
>

什么时候使用 Box ？

• 当你想快速创建一个样式 div 原型时。
• 当您想创建一个在其他任何地方都无法真正重用的一次性内联样式时。当您想要修复布局的特定部分中有点偏离的内容时，这很方便。
• 当您想要添加动态或响应式样式并同时使您的代码更易于理解时，因为一切都在一个地方定义，再加上 sx 语法高度紧凑这一事实。
• 当您想引用多个 MUI 主题属性时，因为许多 sx 属性是开箱即用的主题感知属性。

什么时候 不 使用 Box ？

• 当您不需要设置任何样式时。只需使用普通的 div 然后。
• 当您在高度可重用的组件（如列表项、网格项或表格单元格）中使用它时。这是因为 sx prop 的性能最慢（ 比第二慢的方法慢 2 倍）
• 当您使用其他 MUI 组件时。在 v5 中，来自 MUI 的所有组件都有 sx 支持，因此使用 Box 作为包装器或根组件是不必要的，如果你只想设置其他 MUI 组件的样式。

*: 默认情况下 a Box 是 div ，但你可以覆盖它的根组件。例如： <Box component='span'>

原文由 NearHuscarl 发布，翻译遵循 CC BY-SA 4.0 许可协议