material-ui 框组件是做什么用的？

Question

尽我所能，我无法理解这里给出的描述：https : //material-ui.com/components/box/

“Box 组件充当大多数 CSS 实用程序需求的包装器组件。” 什么是 CSS 实用程序需求？

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

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

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

谢谢你。

Answer 1

其他答案并没有真正解释使用Box.

Box呈现一个<div>可以应用CSS样式直接通过阵营道具，为方便起见，因为像单独的CSS文件的替代品，CSS-在-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：

• 您希望封闭组件能够通过传递来覆盖样式classes（makeStyles启用此功能。 <Example classNames={{ root: 'alert' }} />将在makeStyles示例中起作用，但在Box示例中不起作用。）
• 您需要使用非平凡的选择器（例如 JSS 选择器：$root > li > a, $root .third-party-class-name）

Answer 2

ABox基本上是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，则必须theme使用钩子获取对象useTheme并创建内联样式，如果到处滥用，这不是一个好习惯：

<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利用了sxprop，您还可以使用添加响应值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。
• 当您在高度可重用的组件（如列表项、网格项或表格单元格）中使用它时。这是因为sxprop 的性能最慢（比第二​​慢的方法慢 2 倍）
• 当您使用其他 MUI 组件时。在 v5 中，MUI 中的所有组件都sx支持，因此Box如果您只想设置其他 MUI 组件的样式，则无需使用包装器或根组件。

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

Answer 3

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

从结构上讲，它会导致<div>.

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

<>
  Some elements here
</>

因为它用于对事物进行分组。但它会产生一个<div>并且可以包含一些 Material UI 功能：

<Box className={classes.someStyling}>
  Some elements here
</Box>

Answer 4

Material UI 中的 Box 组件有很多有用的东西

最重要的是，box 元素默认内置了 Material-ui/system 功能，这意味着如果您将其用作包装器，您可以将系统功能应用到您需要的内容

就像这个例子：

<Box bgcolor="primary.main" color="primary.contrastText" p={2}>
  primary.main
</Box>

当然，你可以根据需要添加 css 类

它提供的另一个有用的东西是它可以在其他组件中变形，并且对于应用系统功能非常有帮助

就像这个例子：

<Typography component="div" variant="body1">
  <Box color="primary.main">primary.main</Box>
</Typography>

上面的两个示例都是我从文档中获取的，您可以在此链接中找到它们：此处

你可以找到我所说的 Material ui 系统功能的含义：这里

注意：您可以将任何材料 UI 系统功能添加到任何组件，例如此处的文档，但我建议您使用盒子组件来扭曲您需要的内容，这会让生活变得更轻松