Spacing 间距

各种简写响应边距和填充实用程序类，用于修改元素的外观。

符号

空间实用程序将速记边距和填充道具转换为边距和填充CSS声明。 道具使用格式{property}{sides} 命名。

其中属性是其中之一：

• m - 对于设置margin
• p - 对于设置padding

哪边边是其中之一：

• 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个边上设置边距或填充的类

转型

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

• 输入：数字 & 主题：数字 ：该属性乘以主题值。

const theme = {
  spacing: 8,
}

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

• 输入：数字 & 主题：数组 ：属性值用作数组索引。

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

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

• 输入：数字 & 主题：功能 ：使用属性值调用该函数。

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

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

• input: string: 该属性作为原始CSS值传递。

<Box m="2rem" /> // margin: 2rem;
<Box mx="auto" /> // margin-left: auto; margin-right: auto;

示例

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

水平居中

<Box mx="auto">…

API

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

导入名称	Prop	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 pt={2} />
+<Box paddingTop={2} />

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