Instalar Material UI (Material Design) para React

Tiempo de lectura: 2 minutos

Material UI es un framework de desarrollo de interfaces basadas en Google Material Design. Personalmente este estilo de diseño me gusta mucho, tanto por los componentes que tiene, como por la paleta de colores. Llegando a un equilibrio entre usabilidad y diseño moderno.

Vamos a aprender cómo instalar este Framework en nuestro proyecto React. Aquí puedes consultar más sobre este framework: https://mui.com

Lo primero que tenemos que hacer es realizar la instalación de los módulos:

npm install @mui/material @emotion/react @emotion/styled --save

Además, vamos a instalar Roboto, la fuente de Google de Material Design.

npm install @fontsource/roboto --save

También los iconos de Material:

npm install @mui/icons-material --save

Y ya tenemos todo listo para empezar.

Podemos consultar la lista de componentes en esta URL: https://mui.com/material-ui/react-button/

Vamos a implementar un ejemplo de un botón, los pasos serían los siguientes:

Primero importamos las librerías necesarias:

import * as React from 'react';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';

Ahora creamos el render:

function BasicButtons() {
  return (
    <Stack spacing={2} direction="row">
      <Button variant="text">Text</Button>
      <Button variant="contained">Contained</Button>
      <Button variant="outlined">Outlined</Button>
    </Stack>
  );
}

export default BasicButtons;

Hemos creado este componente:

Contiene los tres botones del ejemplo.

Primero hemos creado un Stack:

<Stack spacing={2} direction="row">
  {/* ... elementos hijos */}
</Stack>

Esto crearía un contenedor que organiza sus elementos secundarios en una fila horizontal con un espacio de 2 unidades entre ellos. Los elementos hijos se colocarían uno al lado del otro, y el espacio entre ellos sería de tamaño 2. Esto puede ser útil para crear diseños más limpios y espaciados uniformemente.

Y después hemos creado 3 tipos de botones que ofrece el framework:

  <Button variant="text">Text</Button>
  <Button variant="contained">Contained</Button>
  <Button variant="outlined">Outlined</Button>

Y hasta aquí el tutorial de hoy, hemos aprendido a implementar este framework.