MUI框组件的用途是什么？ [英] What is the MUI Box component for?

问题描述

无论我如何尝试，我都无法理解给出的here描述。

Box组件充当大多数CSS实用工具需要的包装组件。

CSS实用程序需要什么？

此组件的用例是什么？它解决了什么问题？你怎么使用它？

我发现MUI文档非常有限，很难理解。我在谷歌上搜索过，但通常只找到相当轻量级的关于如何使用材料UI的博客帖子。除了帮助理解此组件之外，我还非常感谢任何好的资源(如果有的话，就像他们自己的文档的更好版本)。

(背景，我一般理解Reaction、JS、CSS、HTML等，后两者力度较小)。

推荐答案

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

其他答案没有真正解释使用Box的动机。

Box呈现<div>为方便起见，您可以直接通过Reaction道具将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)的情况：

• 您希望封装的组件能够通过传递classes(makeStyles启用此功能。<Example classNames={{ root: 'alert' }} />将适用于makeStyles示例，但不适用于Box示例。)
• 您需要使用非常重要的选择器(示例JSS选择器：$root > li > a，$root .third-party-class-name)

这篇关于MUI框组件的用途是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！