Box

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

简介

Box 组件是一个通用容器，用于将其他组件分组。它是使用 Material UI 时的基本构建块——您可以将其视为带有额外内置功能的 <div>，例如访问您应用程序的主题和 sx 属性。

用法

Box 组件与 Material UI 中提供的其他容器的不同之处在于，它的用途旨在是多用途和开放式的，就像 <div> 一样。相比之下，Container、Stack 和 Paper 等组件具有特定于用途的属性，使其成为某些用例的理想选择：Container 用于主要布局方向，Stack 用于一维布局，Paper 用于提升的表面。

基础知识

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

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

此 Box 渲染为 HTML section 元素。

import * as React from 'react';
import Box from '@mui/material/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/material/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 开始编辑

自定义

使用 sx 属性

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

import * as React from 'react';
import Box from '@mui/material/Box';
import { ThemeProvider } from '@mui/material/styles';

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 from '@mui/material/Box';
import { ThemeProvider } from '@mui/material/styles';

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 开始编辑

使用 MUI System 属性

解剖结构

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

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

API

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

<Box />