Cómo usar Material UI con Next.js

Si eres desarrollador/a frontend debes saber que la identidad de marca está presente en cada componente de la web. Existen muchas herramientas y librerías para manejar los estilos de una web, comenzando por Sass donde ya se pueden aplicar estilos por componentes, y terminando con Material UI, una librería con componentes ya desarrollados, clara documentación y, lo mejor, muchos elementos que pueden customizarse fácilmente.

¿Por qué usar Material UI?

Hay una frase conocida que he escuchado mucho en desarrollo web: “No reinventemos la rueda”.  Actualmente, existen muchas herramientas y librerías que facilitan mucho el desarrollo. Hace poco,  intenté hacer componentes desde cero y hay mucho que cubrir, desde la estructura de la aplicación hasta los estilos y comportamiento. ¿Cuál fue el final de la historia? Usé una librería de componentes y, si era necesario, se hacían cambios sobre el componente.

Comencé a usar Material UI y lo que rescato es la flexibilidad de sus componentes, no solo en estilos sino en la forma y elementos que lo conforman. Además de las variantes, Material UI expone cada elemento de un componente con el fin de ser personalizado. Por ejemplo, un textfield tiene un borde de 2 px y puede mostrar un mensaje de error de color rojo. Desde el archivo de configuración puedo cambiar el borde a 1 px y cambiar el color por otro.

Adicionalmente (y como un bonus), Material UI ofrece un UI kit en Figma, Adobe y Sketch para ser usado por diseñadores a la hora de hacer sus propuestas.

Para finalizar con las ventajas, la documentación de la librería es muy importante. En el tiempo que llevo trabajando con Material UI, han sido pocas veces las que he recurrido a blogs u otras fuentes que no sean su documentación, y ¡todo funciona a la primera!

¡Empecemos!

Instalaremos Material UI en un proyecto Next. Para ello, debes conocer lo siguiente:

• Typescript.
• Next.js.

Crear el proyecto Next.js

Insertamos lo siguiente en la consola:

Tenemos la siguiente estructura de archivos:

Ejecutamos el comando para ver la web:

npm run dev

Ahora agregamos una página llamada Material.

Ingresamos a localhost:3000/material, donde veremos los componentes de Material UI que agregaremos.

Instalar Material UI

Ejecutamos el siguiente comando:

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

Una vez instalada la librería, podemos usar los componentes con los estilos por defecto. El objetivo es cambiar los estilos por los de nuestra marca.

Reemplazamos el contenido de material.tsx por botones de Material UI con sus variantes:

Los botones se verán como en la siguiente captura. Puedes jugar con sus variantes y colores:

Ahora vamos a personalizar los componentes. Para esto, creamos un tema que tendrá los valores de colores, fuente, tamaños, etc.

El tema revelo.ts exporta la configuración de Material en formato json.

Colores en Material UI

Cambiamos los colores primary y secondary, pero aún no veremos los cambios en la web hasta usar el tema que creamos en material.tsx.

Antes de pintar o como padre de los componentes, agregamos el ThemeProvider:

Ahora, si vamos a la web, se pintarán los componentes con los nuevos colores:

Además, Material UI usa los colores dark para los estados de los botones. En este caso, el botón primario está en estado hover y se pinta el color primary.dark.

Material UI no solo ofrece el color primario y secundario, sino que provee una la lista que se puede customizar en la librería:

• black.
• white.
• primary.
• secondary.
• success.
• info.
• warning.
• error.
• grey.

Además, si tenemos colores que agregar, podemos expandir la interfaz de la pallete.

Así podremos agregar tonos de colores dependiendo de las necesidades, y usarlos en componentes. Solo queda definir estos colores:

Fuentes en Material UI

Material UI usa Roboto por defecto, por lo que cambiaremos la fuente a Rubik.

Primero, vamos a Google Fonts para seleccionar la fuente y obtener el código de cómo importar la fuente con sus diferentes font-weight.

Luego, configuramos la fuente en revelo.ts:

Y veremos el cambio:

Así como el cambio de fuente, Material UI ofrece headings, subtítulos, captions, etc. Y cada etiqueta se puede customizar con una fuente, peso y espaciado:

Componentes en Material UI

Material UI es una librería de componentes. En pasos anteriores, hemos cambiado colores y fuentes y debemos tener en cuenta que éstos se aplican a todos los componentes que ofrece la librería. Ahora que ya tenemos esa configuración general, veremos algunos de los componentes más usados y cómo customizarlos.

Material UI ofrece tanto componentes de información o visualización de datos (cards, tablas, tabs, etc) como inputs (textfields, botones, checkbox, etc). Me interesa más customizar los inputs, pues con estos componentes tenemos variantes, estados, interacciones, errores, y más puntos que abarcar.

Inputs en Material UI

El componente textfield es básico en un formulario y tenemos un estándar de cómo se vería visualmente. En esta sección empezaremos con textfields y abarcaremos  sus partes como input, label, etc. A continuación, algunas variantes del textfield y lo que podemos customizar.

Comenzamos pintando dos textfields:

Como resultado, tenemos lo siguiente (las imágenes de la derecha tienen un estado focus):

Si queremos cambiar el color gris del label, helperhext o borde, lo haremos desde el componente. A continuación un ejemplo donde se customiza el textfield con colores muy diferentes para notar la diferencia.

Para empezar a cambiar los componentes debemos agregar components a la altura de palette. Dentro de components escribimos Mui y podemos sacar provecho del autocompletado para ubicar el componente.

Para ajustar los grises del componente debemos hacerlo desde MuiTextField. Lo que hace Material UI con styleOverrides es sobreescribir los estilos del componente. Ahora, ¿cómo sé cuáles son los componentes del TextField? Muy fácil, si inspeccionas el elemento verás cómo arma al field y, por etiquetas, puedes customizar cada elemento.

Modificamos el color del label por un color verde, el color del helperText que está en una etiqueta p y el borde del field que está en la etiqueta fieldSet.

Con estos cambios, el nuevo textField se ve así:

Una recomendación muy importante en inputs (textField, select, checkbox, radio button, switch) es que se cambie los estilos de cada componente que forma este componente más grande, pues si modificamos los estilos de cada componente pequeño, esto se aplicará a todos los inputs. Veremos un ejemplo a continuación:

Si pintamos un select, se vería así:

Como vemos, los estilos de label, borde y helperhext se aplicaron solo al textfield. Y si modificamos MuiInput, el MuiLabel y MuiHelperText, los cambios se aplicarán a ambos componentes:

El resultado es el siguiente:

Todo lo visto hasta aquí son cambios de estilos, pero ¿qué pasa si quiero cambiar la estructura del componente (por ejemplo, quitar el espacio que ocupa el label justo en el borde del textfield y select outlined?).

Como esto es propiedad de la variante outlined, cambiaremos el componente MuiOutlinedInput con notchet:false y le indicaremos a la librería que no lo pinte o considere en el componente. No olvidemos que la librería tiene una documentación muy completa, en MuiOutlinedInput podemos ver este ítem:

Entonces, hacemos el cambio:

Con este cambio, el textfield y select se pintan así:

Puedo subir el label para que sea visible:

Y ahora tengo un componente outlined diferente:

Ahora que ya tenemos un textfield, vamos a ver errores.

Comenzamos agregando el atributo error al textfield:

Ahora se ve así:

Si quiero agregar estilos al texto de error:

Se pinta así:

¿Cómo sé cuál clase agregar? Material UI juega con las clases de los elementos. Entonces inspecciono el elemento y veo que tiene una clase MuiError:

El text-decoration:underline es el estilo que agregamos desde el theme de Material, si hacemos scroll veremos los demás estilos que por defecto tenía.

Hasta aquí hemos abarcado, paso a paso, cómo instalar Material UI, un poco de estilos generales y de componentes y algunas recomendaciones relacionadas. Pero antes de terminar vamos con un poco más de información.

Conclusiones y recomendaciones

• Es muy grato no verte limitado por la librería que elegiste. A veces salen puntos en el camino que te hacen pensar si debiste elegir otra herramienta. Este no es el caso. Hay mucha información en su web y se puede sacar todo el provecho que se quiera. Aquí abarcamos algunos ejemplos, pero Material UI ofrece muchos más componentes.
  
• Si tienes muchos formularios es recomendable crear una carpeta de componentes donde extiendas los componentes de Material UI, así no tienes que customizar los componentes repetidas veces.
  
• Material UI ofrece en su documentación la lista de componentes y una sección Component API donde puedes ver todas las propiedades que tiene cada componente, el tipo de dato que acepta y una descripción. Además, en la sección de Customization puedes ver el tema que tiene por defecto.
  

Espero que este artículo te sirva de punto de partida y te anime a probar Material UI, así como a crear tu nueva librería de componentes con estilos propios.

¡Hasta la próxima!