Espaçamento

Use o auxiliar theme.spacing() para criar um espaçamento consistente entre os elementos da sua UI.

Material-UI usa um fator de escala recomendado de 8px por padrão.

const theme = createTheme();

theme.spacing(2) // = 8 * 2

Espaçamento customizado

Você pode alterar a transformação do espaçamento fornecendo:

• um número

const theme = createTheme({
  spacing: 4,
});

theme.spacing(2) // = 4 * 2

• uma função

const theme = createTheme({
  spacing: factor => `${0.25 * factor}rem`, // (estratégia do Bootstrap)
});

theme.spacing(2); // = 0.25 * 2rem = 0.5rem = 8px

• uma matriz

const theme = createTheme({
  spacing: [0, 4, 8, 16, 32, 64],
});

theme.spacing(2); // = 8

Aridade múltipla

O auxiliar theme.spacing() aceita até 4 argumentos. Você pode usar os argumentos para reduzir o trabalho.

-padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`, // '8px 16px'
+padding: theme.spacing(1, 2), // '8px 16px'

A mistura com valores texto também é suportada:

margin: theme.spacing(1, 'auto'), // '8px auto'