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;

示例

p: 1

m: 1

p: 2

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

水平居中

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:

Centered element

<Box sx={{ mx: "auto", width: 200 }}>…
<Box border={0}>…
<Box sx={{ borderTop: 1 }}>…
<Box borderRight={0}>…
<Box borderBottom={0}>…
<Box borderLeft={0}>…
<Box sx={{ borderRight: 1 }}>…
<Box sx={{ borderBottom: 1 }}>…
<Box sx={{ borderLeft: 1 }}>…

API

import { spacing } from '@material-ui/system';

导入名称	属性	CSS 属性	Theme key
`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`

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

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

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