Box 分组

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

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

示例

查看调色板样式功能。

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 继承是于事无补的。要解决此问题，您有以下两种选择：

使用 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>
  );
}

使用 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 属性。