跳转到内容
编辑此页面

Box 分组

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

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

示例

查看调色板样式功能。

sx 属性

所有的样式功能都可以通过 sx 属性 更改。 同时，您也可通过sx 属性 指定任何您想添加的 CSS 规则。 下面是一个使用例：

import * as React from 'react';
import { Box, ThemeProvider } from '@mui/system';

export default function BoxSx() {
  return (
    <ThemeProvider
      theme={{
        palette: {
          primary: {
            main: '#007FFF',
            dark: '#0059B2',
          },
        },
      }}
    >
      <Box
        sx={{
          width: 300,
          height: 300,
          bgcolor: 'primary.main',
          '&:hover': {
            backgroundColor: 'primary.dark',
            opacity: [0.9, 0.8, 0.7],
          },
        }}
      />
    </ThemeProvider>
  );
}

覆盖 Material UI 组件

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

import * as React from 'react';
import { Box } from '@mui/system';
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继承来解决这个问题。 为了回避这个 CSS 继承无效的问题， 如该组件的子组件是一个 Material UI 组件，您可直接在该组件上定义 sx 属性。

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

如该组件的子组件不是一个 Material UI 组件，您可通过使用 component 属性来达到效果。

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

API

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

系统属性

作为一个 CSS 通用组件，Box 组件同时支持所有的 system 属性。 与定义属性一样，您可在组件中直接定义它们。 例如您想定义 margin-top 时

<Box mt={2}>

创造您专用的 Box 组件

如您想使用与系统默认主题不同主题的 Box 组件，您可以通过createBox() 方式创造您专用的版本。

import { createBox, createTheme } from '@mui/system';

const defaultTheme = createTheme({
  // your custom theme values
});

const Box = createBox({ defaultTheme });

export default Box;