Pular para o conteúdo

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 é um dos seguintes:

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

Onde o 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 usado como o í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

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

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