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