Box 分组

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

在@material-ui/system中，您可以找到所述 Box 组件包的 所有的样式功能。

示例

查看调色板样式功能。

sx 属性

All system properties are available via the sx prop. In addition, the sx prop allows you to specify any other CSS rules you may need. 下面是一个如何使用的示例： 此外，sx 属性允许您指定您可能需要的任何其他 CSS 样式。 下面是一个如何使用的示例：

import * as React from 'react';
import Box from '@mui/material/Box';

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

覆盖 Material-UI 组件

Box 组件能够封装您的组件。 假设反之你想使用一个 <span>： 假设反之你想使用一个 <span>：

import * as React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';

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

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

但是，有时您必须针对到底层的 DOM 元素。 比如，你要修改按钮的边框 但是按钮组件已经定义自己的样式。 所以使用 CSS 继承是于事无补的。 想要解决这个问题，可以将sx作为MUI组件的props使用

-<Box sx={{ border: '1px dashed grey' }}>
-  <Button>保存</Button>
-</Box>
+<Button sx={{ border: '1px dashed grey' }}>保存</Button>

For non-Material-UI components, use the component prop.

-<Box sx={{ border: '1px dashed grey' }}>
-  <button>Save</button>
-</Box>
+<Box component="button" sx={{ border: '1px dashed grey' }}>Save</Box>

API

import Box from '@material-ui/core/Box';

名称	类型	默认值	描述
children	node		Box 渲染函数或者返回节点。
component	union: string |  func |  object	'div'	component 用于根节点。 可以是一个使用 DOM 元素或者一个组件的字符串。
sx	object	{}	接受所有系统属性，以及任何有效的 CSS 属性。

系统属性

作为一个 CSS 实用组件, Box 也支持所有 system 属性。 您可以直接在组件上使用它们作为 prop。 例如，margin-top:

<Box mt={2}>