Box

Box 组件是一个通用的、主题感知的容器，可以访问 MUI System 的 CSS 实用工具。

简介

Box 组件是一个用于组合其他组件的通用容器。它是使用 MUI System 时的基本构建块——你可以将其视为一个带有额外内置功能的 <div>，例如访问你应用的主题和 sx prop。

用法

Box 组件与 MUI System 中提供的其他容器的不同之处在于，它的用途是多用途和开放式的，就像 <div> 一样。相比之下，像 Container 和 Stack 这样的组件具有特定于用途的 props，这使得它们非常适合某些用例：Container 用于主布局方向，而 Stack 用于一维布局。

基础知识

import Box from '@mui/system/Box';

Box 组件默认渲染为 <div>，但你可以使用 component prop 换成任何其他有效的 HTML 标签或 React 组件。下面的演示将 <div> 替换为 <section> 元素

此 Box 渲染为 HTML section 元素。

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

export default function BoxBasic() {
  return (
    <Box component="section" sx={{ p: 2, border: '1px dashed grey' }}>
      This Box renders as an HTML section element.
    </Box>
  );
}

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

export default function BoxBasic() {
  return (
    <Box component="section" sx={{ p: 2, border: '1px dashed grey' }}>
      This Box renders as an HTML section element.
    </Box>
  );
}

按 Enter 开始编辑

自定义

使用 MUI System props

作为一个 CSS 实用工具组件，Box 支持所有 MUI System 属性。你可以直接在组件上将它们用作 props。

此 Box 使用 MUI System props 进行快速自定义。

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

export default function BoxSystemProps() {
  return (
    <Box
      sx={{
        height: 200,
        width: 200,
        my: 4,
        display: 'flex',
        alignItems: 'center',
        gap: 4,
        p: 2,
        border: '2px solid grey',
      }}
    >
      This Box uses MUI System props for quick customization.
    </Box>
  );
}

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

export default function BoxSystemProps() {
  return (
    <Box
      sx={{
        height: 200,
        width: 200,
        my: 4,
        display: 'flex',
        alignItems: 'center',
        gap: 4,
        p: 2,
        border: '2px solid grey',
      }}
    >
      This Box uses MUI System props for quick customization.
    </Box>
  );
}

按 Enter 开始编辑

使用 sx prop

使用 sx prop 可以使用 CSS 的超集快速自定义任何 Box 实例，该超集可以访问 MUI System 包中公开的所有样式函数和主题感知属性。下面的演示展示了如何使用此 prop 应用主题中的颜色

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

export default function BoxSx() {
  return (
    <ThemeProvider
      theme={{
        palette: {
          primary: {
            main: '#007FFF',
            dark: '#0066CC',
          },
        },
      }}
    >
      <Box
        sx={{
          width: 100,
          height: 100,
          borderRadius: 1,
          bgcolor: 'primary.main',
          '&:hover': {
            bgcolor: 'primary.dark',
          },
        }}
      />
    </ThemeProvider>
  );
}

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

export default function BoxSx() {
  return (
    <ThemeProvider
      theme={{
        palette: {
          primary: {
            main: '#007FFF',
            dark: '#0066CC',
          },
        },
      }}
    >
      <Box
        sx={{
          width: 100,
          height: 100,
          borderRadius: 1,
          bgcolor: 'primary.main',
          '&:hover': {
            bgcolor: 'primary.dark',
          },
        }}
      />
    </ThemeProvider>
  );
}

按 Enter 开始编辑

创建你自己的 Box

使用 createBox() 实用工具创建你自己的 Box 组件版本。如果你需要将你的容器暴露于与你正在使用的库的默认主题不同的主题，这将非常有用

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

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

const Box = createBox({ defaultTheme });

export default Box;

解剖结构

Box 组件由单个根 <div> 元素组成

<div className="MuiBox-root">
  <!-- contents of the Box -->
</div>

API

请参阅下面的文档，以获取此处提及的组件可用的所有 props 和类的完整参考。

<Box />