Saltar al contenido

🎉 Material UI v5 is out now! Check out the announcement blog post

Espaciado

Use el ayudante theme.spacing() para crear un espacio consistente entre los elementos de su interfaz de usuario.

Material-UI utiliza un factor recomendado de escalado de 8px por defecto.

const theme = createTheme();

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

Espacio personalizado

Puede cambiar la transformacin de espaciado proporcionando:

  • un número
const theme = createTheme({
  spacing: 4,
});

theme.spacing(2) // = 4 * 2
  • una función
const theme = createTheme({
  spacing: factor => `${0. 5 * factor}rem`, // (estrategia de Bootstrap)
});

theme.spacing(2); // = 0.25 * 2rem = 0.5rem = 8px
  • una lista
const theme = createTheme({
  spacing: [0, 4, 8, 16, 32, 64],
});

theme.spacing(2); // = 8

Entidad múltiple

El ayudante theme.spacing() acepta hasta 4 argumentos. Puede utilizar los argumentos para reducir el boilerplate.

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

Mezclar valores de texto también es compatible:

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