跳转到内容

Box 分组

对于大多数 CSS 实用程序来说,Box 组件能够作为一个包装组件来使用。

@material-ui/system中,您可以找到所述 Box 组件包的 所有的样式功能。 它是通过 @material-ui/core/styles 中的 styled() 函数来创建的。

示例

查看调色板样式功能。

覆盖 Material-UI 组件

Box 组件能够封装您的组件。 它创建了一个新的 DOM 元素,默认情况下为 <div>,并可以通过 组件 的属性进行更改。 假设反之你想使用一个 <span>

<Box component="span" m={1}>
  <Button />
</Box>

当所需的更改与新的 DOM 元素分开时比较有效。 例如,您可以使用这个方法来更改边距。

但是,有时您必须针对到底层的 DOM 元素。 例如,您想要更改一个按钮的文本颜色。 Button 组件已经定义好了它自己的颜色。 CSS 继承于事无补。 要解决此问题,您有以下两种选择:

  1. 使用 React.cloneElement()

Box 组件有一个 clone 的属性,通过它您可以使用 React 克隆元素的方法。

<Box color="text.primary" clone>
  <Button />
</Box>
  1. 使用 render props

您可以在 Box 的子组件中使用 render props 的函数。 您可以不用 className

<Box color="text.primary">
  {props => <Button {...props} />}
</Box>

⚠️CSS 的优先级依赖于导入的顺序。 如果您希望确保覆写包装组件的样式,则需要在最后才导入 Box。

API

import Box from '@material-ui/core/Box';
名称 类型 默认值 描述
children * union: node |
 func
Box 渲染函数或者返回节点。
clone bool false 如果设置为 true,box 将会重复利用其子 DOM 元素。 它在内部使用 React.cloneElement
component union: string |
 func |
 object
'div' component 用于根节点。 可以是一个使用 DOM 元素或者一个组件的字符串。

任何所提供的其它的属性会在样式功能中使用,或者传递到根元素。