間距

多種簡寫響應式邊距和內距工具類別，可修改元素的外觀。

標記法

空間工具將簡寫邊距和內距屬性轉換為邊距和內距 CSS 宣告。屬性名稱格式為 {property}{sides}。

其中 property 為下列之一

m - 設定 margin 的類別
p - 設定 padding 的類別

其中 sides 為下列之一

t - 設定 margin-top 或 padding-top 的類別
b - 設定 margin-bottom 或 padding-bottom 的類別
l - 設定 margin-left 或 padding-left 的類別
r - 設定 margin-right 或 padding-right 的類別
x - 設定 *-left 和 *-right 的類別
y - 設定 *-top 和 *-bottom 的類別
空白 - 設定元素所有 4 個邊的邊距或內距的類別

轉換

根據輸入和主題配置，套用以下轉換

輸入：number & 主題：number：屬性值會乘以主題值。

const theme = {
  spacing: 8,
}

<Box sx={{ m: -2 }} /> // margin: -16px;
<Box sx={{ m: 0 }} /> // margin: 0px;
<Box sx={{ m: 0.5 }} /> // margin: 4px;
<Box sx={{ m: 2 }} /> // margin: 16px;

輸入：number & 主題：array：屬性值會用作陣列索引。

const theme = {
  spacing: [0, 2, 3, 5, 8],
}

<Box sx={{ m: -2 }} /> // margin: -3px;
<Box sx={{ m: 0 }} /> // margin: 0px;
<Box sx={{ m: 2 }} /> // margin: 3px;

輸入：number & 主題：function：將使用屬性值呼叫該函式。

const theme = {
  spacing: value => value * 2,
}

<Box sx={{ m: 0 }} /> // margin: 0px;
<Box sx={{ m: 2 }} /> // margin: 4px;

輸入：string：屬性值會作為原始 CSS 值傳遞。

<Box sx={{ m: '2rem' }} /> // margin: 2rem;
<Box sx={{ mx: 'auto' }} /> // margin-left: auto; margin-right: auto;

範例

p: 1

m: 1

p: 2

<Box sx={{ p: 1 }}>…
<Box sx={{ m: 1 }}>…
<Box sx={{ p: 2 }}>…

水平置中

CSS flex 和 grid 顯示屬性通常用於將元素對齊中心。但是，您也可以使用 margin-left: auto;、margin-right: auto; 和寬度來水平置中

置中元素

<Box sx={{ mx: 'auto', width: 200 }}>…

API

import { spacing } from '@mui/system';

匯入名稱	屬性	CSS 屬性	主題鍵
`間距`	`m`	`margin`	`間距`
`間距`	`mt`	`margin-top`	`間距`
`間距`	`mr`	`margin-right`	`間距`
`間距`	`mb`	`margin-bottom`	`間距`
`間距`	`ml`	`margin-left`	`間距`
`間距`	`mx`	`margin-left`、`margin-right`	`間距`
`間距`	`my`	`margin-top`、`margin-bottom`	`間距`
`間距`	`p`	`padding`	`間距`
`間距`	`pt`	`padding-top`	`間距`
`間距`	`pr`	`padding-right`	`間距`
`間距`	`pb`	`padding-bottom`	`間距`
`間距`	`pl`	`padding-left`	`間距`
`間距`	`px`	`padding-left`、`padding-right`	`間距`
`間距`	`py`	`padding-top`、`padding-bottom`	`間距`

有些人覺得屬性簡寫令人困惑，如果您喜歡，可以使用完整版本

-<Box sx={{ pt: 2 }} />
+<Box sx={{ paddingTop: 2 }} />

-<Box sx={{ px: 2 }} />
+<Box sx={{ paddingX: 2 }} />