方塊

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 />