跳转到内容

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-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 的类名

转换

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

  • 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 }}><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: 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 }}>

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