Espaciado

Una amplia gama de tipos de utilidades de relleno y márgenes receptivos cortos para modificar la apariencia de un elemento.

Notación

La utilidad espacial convierte el abreviado del margen corto y los accesorios de relleno en márgenes y declaraciones CSS. Los props se nombran usando el formato {property}{sides}.

Where property is one of:

m - for classes that set margin
p - for classes that set padding

Where sides is one of:

t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
l - for classes that set margin-left or padding-left
r - for classes that set margin-right or padding-right
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom
en blanco - para las clases que establecen un margen o un relleno en los 4 lados del elemento

Transformación

Dependiendo del input y la configuración del tema, se aplica la siguiente transformación:

input: number & theme: number: the property is multiplied by the theme value.

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: the property is value is used as the array index.

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: the function is called with the property value.

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

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

input: string: the property is passed as raw CSS value.

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

Ejemplo

p: 1

m: 1

p: 2

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

Centrado Horizontal

Centered element

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

API

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

Nombre del import	Prop	Propiedad CSS	Clave del tema
`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`

Algunas personas encuentran confusión con la abreviatura del prop, puedes usar la versión completa si lo prefieres:

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

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