Box

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

介绍

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

用法

Box 组件与其他 Joy UI 中可用的容器的不同之处在于，它的用途旨在是多用途和开放式的，就像 <div> 一样。相比之下，Stack 和 Sheet 等组件具有特定于用途的属性，这使得它们非常适合某些用例：Stack 用于一维布局，而 Sheet 用于需要访问 Joy UI 全局变体的表面。

基础知识

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

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

此 Box 渲染为 HTML section 元素。

import * as React from 'react';
import Box from '@mui/joy/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/joy/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 属性

作为 CSS 实用程序组件，Box 支持所有 MUI System 属性。您可以直接在组件上将它们用作属性。

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

import * as React from 'react';
import Box from '@mui/joy/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/joy/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 属性

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

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

export default function BoxSx() {
  return (
    <ThemeProvider
      theme={{
        colorSchemes: {
          light: {
            palette: {
              primary: {
                400: '#38bdf8',
                700: '#0369a1',
              },
            },
          },
        },
      }}
    >
      <Box
        sx={{
          width: 100,
          height: 100,
          borderRadius: 1,
          bgcolor: 'primary.700',
          '&:hover': {
            bgcolor: 'primary.400',
          },
        }}
      />
    </ThemeProvider>
  );
}

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

export default function BoxSx() {
  return (
    <ThemeProvider
      theme={{
        colorSchemes: {
          light: {
            palette: {
              primary: {
                400: '#38bdf8',
                700: '#0369a1',
              },
            },
          },
        },
      }}
    >
      <Box
        sx={{
          width: 100,
          height: 100,
          borderRadius: 1,
          bgcolor: 'primary.700',
          '&:hover': {
            bgcolor: 'primary.400',
          },
        }}
      />
    </ThemeProvider>
  );
}

按 Enter 开始编辑

结构

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

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

API

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

<Box />