跳转到内容

Spacing 间距

为了改变一个元素的外观,您可以使用一系列的简写响应式的 margin 和 padding 的辅助工具类。

符号

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

其中_属性_是其中之一:

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

哪边是其中之一:

  • t - 对于设置* margin-toppadding-top*的类
  • b - 对于设置margin-bottom的类padding-bottom的类
  • l - 对于设置margin-leftpadding-left的类
  • r - 对于设置margin-rightpadding-right的类
  • x - 对于设置** -left和** -right的类
  • y - 对于设置** -top和** -bottom的类
  • blank - 能够设置元素的所有 4 个边的 margin 或者 padding 的类名

转换

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

  • 输入:数字 & 主题:数字 :该属性乘以主题值。
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;
  • 输入:数字 & 主题:数组 :属性值用作数组索引。
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;
  • 输入:数字 & 主题:功能 :使用属性值调用该函数。
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 }}>

水平居中

Centered element
<Box sx={{ mx: "auto" }}>

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 }} />