跳转到内容

Box 分组

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

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

示例

查看调色板样式功能。

sx 属性

所有系统属性都可以 通过 sx 属性来获取。 此外,该属性也允许你指定所需要的其他 CSS 规则。 下面是一个如何使用的示例:

import * as React from 'react';
import Box from '@material-ui/core/Box';

export default function BoxSx() {
  return (
    <Box
      sx={{
        width: 300,
        height: 300,
        bgcolor: 'primary.dark',
        ':hover': {
          backgroundColor: 'primary.main',
          opacity: [0.9, 0.8, 0.7],
        },
      }}
    />
  );
}

覆盖 Material-UI 组件

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

import * as React from 'react';
import Box from '@material-ui/core/Box';
import Button from '@material-ui/core/Button';

export default function BoxComponent() {
  return (
    <Box component="span" sx={{ p: 2, border: '1px dashed grey' }}>
      <Button>Save</Button>
    </Box>
  );
}

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

但是,有时您必须针对到底层的 DOM 元素。 例如,你想要改变按钮的边框样式。 但是按钮组件已经定义自己的样式。 所以使用 CSS 继承是于事无补的。 要解决此问题,您有以下两种选择:

  1. 使用 React.cloneElement()

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

import * as React from 'react';
import Button from '@material-ui/core/Button';
import Box from '@material-ui/core/Box';

export default function BoxClone() {
  return (
    <Box sx={{ border: '1px dashed grey' }} clone>
      <Button>Save</Button>
    </Box>
  );
}
  1. 使用 render props

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

import * as React from 'react';
import Button from '@material-ui/core/Button';
import Box from '@material-ui/core/Box';

export default function BoxClone() {
  return (
    <Box sx={{ border: '1px dashed grey' }}>
      {(props) => <Button {...props}>Save</Button>}
    </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 元素或者一个组件的字符串。
sx object {} 接受所有系统属性,以及任何有效的 CSS 属性。