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

Donde property es una de:

• m - para clases que establecen margen
• p - para clases que establecen padding

Donde sides es uno de:

• t - para clases que establecen margin-top o padding-top
• b - para clases que establecen margin-bottom o padding-bottom
• l - para clases que establecen margen-left o padding-left
• r - para clases que establecen margin-right o padding-right
• x - para clases que establecen *-izquierda y *-derecha
• y - para clases que establecen *-top y *-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: número & theme: número: la propiedad se multiplica por el valor del tema.

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;

• input: number & theme: array: the property is value is used as the array index.

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

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

• input: number & theme: function: the function is called with the property value.

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

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

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

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

Ejemplo

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

Centrado Horizontal

<Box 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 pt={2} />
+<Box paddingTop={2} />

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