Espaçamento

A wide range of shorthand responsive margin and padding utility classes to modify an element's appearance.

Notação

O utilitário de espaço converte margens e propriedades de preenchimento para margem e preenchimento de declarações CSS. As propriedades são nomeadas usando o formato {property}{sides}.

Onde a propriedade é uma das seguintes:

m - para classes que definem margin
p - para classes que definem padding

Onde os sides é um dos seguintes:

t - para classes que configuram margin-top ou padding-top
b - para classes que configuram margin-bottom ou padding-bottom
l - para classes que configuram margin-left ou padding-left
r - para classes que configuram margin-right ou padding-right
x - para classes que configuram ambos **-left* e **-right*
y - para classes que configuram **-top* e **-bottom*
blank - para classes que configuram margin ou padding nos 4 lados do elemento

Transformação

Dependendo da entrada e da configuração do tema, a seguinte transformação é aplicada:

entrada: number & tema: number: a propriedade é multiplicada pelo valor do tema.

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;

entrada: number & tema: array: a propriedade é o valor do índice no 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;

entrada: number & tema: function: a função é chamada com o valor da propriedade.

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

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

entrada: string: a propriedade é passada como valor CSS bruto.

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

Exemplo

p: 1

m: 1

p: 2

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

Centralização horizontal

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:

Centered element

<Box sx={{ borderColor: 'primary.main' }}>…
<Box borderColor="secondary.main">…
<Box borderColor="error.main">…
<Box borderColor="grey.500">…
<Box borderColor="text.primary">…
<Box sx={{ borderColor: 'secondary.main' }}>…
<Box borderColor="secondary.main">…
<Box borderColor="error.main">…
<Box borderColor="grey.500">…
<Box borderColor="text.primary">…
<Box sx={{ borderColor: 'error.main' }}>…
<Box borderColor="secondary.main">…
<Box borderColor="error.main">…
<Box borderColor="grey.500">…
<Box borderColor="text.primary">…
<Box sx={{ borderColor: 'grey.500' }}>…
<Box borderColor="secondary.main">…
<Box borderColor="error.main">…
<Box borderColor="grey.500">…
<Box borderColor="text.primary">…
<Box sx={{ borderColor: 'primary.main' }}>…
<Box borderColor="secondary.main">…
<Box borderColor="error.main">…
<Box borderColor="grey.500">…
<Box borderColor="text.primary">…
<Box sx={{ borderColor: 'secondary.main' }}>…
<Box borderColor="secondary.main">…
<Box borderColor="error.main">…
<Box borderColor="grey.500">…
<Box borderColor="text.primary">…
<Box sx={{ borderColor: 'error.main' }}>…
<Box borderColor="secondary.main">…
<Box borderColor="error.main">…
<Box borderColor="grey.500">…
<Box borderColor="text.primary">…
<Box sx={{ borderColor: 'grey.500' }}>…
<Box borderColor="secondary.main">…
<Box borderColor="error.main">…
<Box borderColor="grey.500">…
<Box borderColor="text.primary">…
<Box borderColor="primary.main">…
<Box borderColor="secondary.main">…
<Box borderColor="error.main">…
<Box borderColor="grey.500">…
<Box sx={{ mx: "auto", width: 200 }}>…
<Box borderColor="secondary.main">…
<Box borderColor="error.main">…
<Box borderColor="grey.500">…
<Box borderColor="text.primary">…

API

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

Nome da importação	Propriedade	Propriedade CSS	Chave do 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`

Algumas pessoas acham a propriedade abreviada confusa, você pode usar a versão completa se preferir:

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

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