# MUI｜Box 與 Div 有什麼差異？

MUI 的 `<Box>` 元件是一個用來群組元件的通用容器，可以把它當作有額外功能的 `<div>`，例如：可以使用 `sx` 屬性和 theme 樣式。

> MUI 的 theme 是一個 JavaScript 物件，用來集中管理視覺風格。可想像成一個網站的設計規範。常用來統一規範的樣式如：深色模式、主題色、動畫速率等。
>

與 MUI 的其他容器元件的不同之處，在於它是多用途的（multipurpose，*個人理解為不知道要用什麼當容器就用它*）。相較之下，`<Container>`、 `<Stack>`、 `<Paper>` 等元件就會具有特定的用途。

> `<Container>` ：響應式佈局設計的容器元件。
> 當螢幕寬度在兩個斷點（grid）之間時，Container 會採用當前斷點的最大寬度作為約束，保持內容置中。類似 Bootstrap 的 `.container` 的功能。
>
> `<Stack>` 元件是處理一維佈局（水平或垂直）的容器元件，設計靈感來自 CSS 的 Flexbox。
>
> `<Paper>` 是模擬實體紙張效果的容器元件，是基於 Material Design 理念設計的。

## 程式範例

這個範例展示了如何透過 `ThemeProvider` 設定全局主題，並在 `Box` 元件上使用 `sx` 屬性來套用主題中的樣式。


#### 1. 引入所需元件
首先，從 `@mui/material` 引入 `Box` 和 `ThemeProvider`。
- `ThemeProvider`: 讓你為 MUI 元件設定一個全局的主題。

#### 2. 定義主題
在 `ThemeProvider` 中，使用 `theme` 屬性來定義一個簡單的主題物件。在這個範例中，我們設定了 `palette`（調色盤），並定義了一個名為 `primary` 的主色，它包含 `main` 和 `dark` 兩種狀態的顏色。

#### 3. 在 `Box` 中使用 `sx` 屬性
在 `ThemeProvider` 的包裹下，我們使用的 `Box` 元件可以利用 **`sx`** 屬性存取 `ThemeProvider` 中定義的顏色。
- `'&:hover'`: `sx` 支援偽類選擇器，`&` 代表當前元件。這裡我們設定滑鼠懸停時，背景色會變成主題中的 `primary.dark`。

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>
  );
}

### 參考資料
[Redux｜react-box](https://mui.com/material-ui/react-box/)