本文介绍了MUI框组件的用途是什么?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
无论我如何尝试,我都无法理解给出的here描述。
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框组件的用途是什么?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!