间距

各种简写响应式 margin 和 padding 实用程序类，用于修改元素的外观。

符号

空间实用程序将简写 margin 和 padding 属性转换为 margin 和 padding 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 个边的 margin 或 padding 的类

转换

根据输入和主题配置，应用以下转换

input: number & theme: 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;

input: number & theme: 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;

input: number & theme: function: 使用属性值调用该函数。

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

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

input: 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';

导入名称	Prop	CSS 属性	主题键
`spacing`	`m`	`margin`	`spacing`
`spacing`	`mt`	`margin-top`	`spacing`
`spacing`	`mr`	`margin-right`	`spacing`
`spacing`	`mb`	`margin-bottom`	`spacing`
`spacing`	`ml`	`margin-left`	`spacing`
`spacing`	`mx`	`margin-left`, `margin-right`	`spacing`
`spacing`	`my`	`margin-top`, `margin-bottom`	`spacing`
`spacing`	`p`	`padding`	`spacing`
`spacing`	`pt`	`padding-top`	`spacing`
`spacing`	`pr`	`padding-right`	`spacing`
`spacing`	`pb`	`padding-bottom`	`spacing`
`spacing`	`pl`	`padding-left`	`spacing`
`spacing`	`px`	`padding-left`, `padding-right`	`spacing`
`spacing`	`py`	`padding-top`, `padding-bottom`	`spacing`

有些人觉得 prop 简写令人困惑，如果您愿意，可以使用完整版本

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

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