Box

Box 元件是一個通用的、主題感知的容器，可以使用來自 MUI System 的 CSS 工具。

簡介

Box 元件是一個用於將其他元件分組的通用容器。它是使用 MUI System 時的基本構建模塊——您可以將其視為具有額外內建功能的 <div>，例如存取您應用程式的主題和 sx 屬性。

用法

Box 元件與 MUI System 中提供的其他容器不同之處在於，它的用途旨在是多用途和開放式的，就像 <div> 一樣。相比之下，Container 和 Stack 等元件具有特定用途的 props，使其成為某些用例的理想選擇：Container 用於主要版面配置方向，而 Stack 用於一維佈局。

基礎

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

Box 元件預設渲染為 <div>，但您可以使用 component 屬性替換為任何其他有效的 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 屬性

使用 sx 屬性快速自訂任何 Box 實例，它使用 CSS 的超集，可以存取 MUI System 套件中公開的所有樣式函數和主題感知屬性。下面的演示展示了如何使用此屬性應用主題中的顏色

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