Spacing 间距

A wide range of shorthand responsive margin and padding utility classes to modify an element's appearance.

符号

用 space 辅助工具能够将简写的 margin 和 padding 属性转换为 margin 和 padding 的 CSS 声明。 而属性则使用 {property}{sides} 的格式命名。

其中属性是其中之一：

• 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*的类
• blank - 能够设置元素的所有 4 个边的 margin 或者 padding 的类名

转换

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

• input: number & theme: number: 该属性乘以 theme 的值。

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;

示例

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

水平居中

The CSS flex and grid display properties are often used to align elements at the center. The CSS flex and grid display properties are often used to align elements at the center. However, you can also use margin-left: auto;, margin-right: auto;, and a width for horizontally centering: However, you can also use margin-left: auto;, margin-right: auto;, and a width for horizontally centering:

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

API

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

有些人觉得属性简写让人困惑，如果你愿意的话，您也可以使用完整版：

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

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