En clases anteriores hemos visto cómo podemos utilizar un framework CSS para estilar nuestra aplicación,
pero también podemos utilizar Style Components, una utilidad muy popular que nos permite estilar nuestros componentes
y reutilizarlos en nuestra aplicación, y todo basado con CSS y además con diferentes ventajas.
Por ejemplo, no tener que preocuparnos de clases, ya que nos crea hashes únicos para nuestros componentes.
Así que vamos a ver una introducción a Style Components.
Style Components lo que te permite es crear o darle la visualización con CSS a elementos de HTML o a componentes que acepten la prop class name
y volverlos a utilizar de forma que vas a poder separar la parte visual de la parte más funcional.
Y lo vamos a ver en un momento.
He hecho un stash, o sea que ya tengo mi aplicación otra vez desde cero, como lo habíamos dejado,
y vamos a ver el ejemplo de, por ejemplo, el botón.
Vamos a la aplicación un momento para que veamos que está toda limpia, ¿vale?
Y veis que aquí tengo este botón, que es Make Not Important, y es el por defecto del navegador.
Vamos a por ese botón.
Para hacer esto, vamos a ir otra vez al Package JSON y vamos a añadir aquí Style Components, ¿vale?
Style Components, Style Components.
La 5.2.3.
Pues vamos a hacer aquí un npm install para instalar la dependencia de los Style Components.
Fíjate, es un approach totalmente distinto.
A mí personalmente me gusta bastante, pero bueno, ahí de todo.
O sea, cada uno que le guste lo que opine.
Por ejemplo, vamos a crear un componente que sea un botón, ¿vale?
Lo que vamos a hacer es importar Style desde Style Components,
y ahora lo que vamos a hacer es crear un botón, y ahora utilizamos Style.
Punto, y fíjate lo que tenemos aquí.
Nos sale un montón de cosas, pero si miramos rápidamente, aparte de algunos métodos y tal,
fíjate, tenemos a Site, Article, la B, la A, tendríamos como todos los elementos HTML.
Y de hecho, este Style lo que nos permite, de primeras, es estilar, pues, por ejemplo, un botón.
Todos los elementos HTML los puedes estilar de esta forma.
Y ahora, utilizando los Template Strings, esto es como, esto es una forma especial de utilizar los Template Strings,
que se dice en plantillas de texto, en las que tú tienes este método,
y directamente le puedes utilizar, pasar un Template Strings.
Pero fíjate que ni siquiera lo estamos ejecutando, ¿vale?
Sino que directamente lo estamos poniendo así.
Ahora, podríamos estilar este botón.
¿Y cómo podemos hacer este botón?
Bueno, pues vamos a hacer que tenga, que sea, yo qué sé, white,
vamos a poner el fontSize, que sea un em.
Fíjate que además, tenemos la sintaxis, se está viendo correctamente.
Esto es porque tengo una extensión que detecta que esto es un Style Component,
y la sintaxis ya la va poniendo correctamente, ¿vale?
Vamos a poner que tenga margen, bueno, vamos a poner un poco de estilo,
pero más o menos, ¿eh?
Porque no lo tengo preparado, así que veremos cómo queda esto.
Vale, border, y vamos a poner un border radius, yo qué sé, de 5 píxers.
Ahora, este botón lo podríamos exportar directamente.
Lo único que tiene es que esto es el botón HTML y tiene estos estilos de aquí.
Ya está, esto es todo lo que tiene.
De hecho, vamos a asegurarnos que tiene el cursor como pointer, ¿vale?
Esto lo que nos crea es un componente de React que ahora podemos utilizar allá donde queramos.
Por ejemplo, vamos a la nota y vamos a poner aquí, en lugar del button que teníamos antes,
vamos a poner el button, así, en mayúscula.
¿Ves? Me lo ha importado de donde lo habíamos creado.
Y lo importante de este componente es que al final le puedes pasar las mismas props
que ya le estábamos pasando al botón.
O sea, las props son las mismas que le estamos pasando a este componente button.
Las mismas, exactamente, ¿vale?
Ahora vamos a ir a nuestra aplicación y, ¿ves?
Aquí tendríamos nuestro botón que hemos estilado y ya lo podríamos estar utilizando.
Los style components, por supuesto, aceptan los pseudo-elementos, los pseudo-selectores, las pseudo-clases.
Por ejemplo, una pseudo-clase sería la del hover, cuando tú haces un hover.
Para ello, utiliza una sintaxis muy parecida a la que tiene sas, ¿vale?
Que sería con el ampersand.
Que puedes decir ampersand, dos puntos, hover.
Y cuando es hover, vale.
Pues vamos a hacer que esto tenga un background, ese 0.9f.
Y, pues, vamos a hacer que esto tenga una transición.
Y ahora, si volvemos, podemos ver que ahora está haciendo la transición
y que detecta el hover y que ya estaría.
Esto lo podríamos hacer también, pues, con el input, con cualquier cosa.
De hecho, ¿ves el input que tenemos aquí?
Pues podríamos hacer lo mismo, exportar el input y ya está.
Al final sería repetir un poco lo mismo.
Y no me quiero extender en esta parte.
Pero solo para que desbloquearte un problema que puedes pensar,
esto sí que te lo voy a enseñar, ¿vale?
Por ejemplo, viendo aquí el header, vemos estos ANC.
Bueno, tenemos aquí como unos enlaces, ¿no?
Home, nodes, users y login.
¿Qué pasa con estos enlaces?
Pues que si vamos a la app, fíjate.
Esto es link, no es un ANC.
Por lo tanto, ¿cómo podemos estilar este link?
Pues lo vamos a ver muy fácilmente.
Vamos a crear un componente o styled.
Vamos a llamarle styled.js, ¿vale?
Importamos style from style components.
Y ahora lo que hacemos es hacer un export de styled link.
Y hacemos un style, pero ahora lo que hacemos en lugar...
No podemos hacer .link.
Esto no tiene sentido, ¿vale?
Porque necesitamos este link de aquí,
que es un componente además que es del React Router.
Así que lo que vamos a hacer es importar aquí el link de React Router DOM.
Y este componente, para poder estilarlo, vamos a tener que hacer esto.
Lo interesante de esto es que tú puedes estilar con los style components
cualquier componente que acepte class link.
Y por suerte, el link, si miramos aquí entre las props que podemos aceptar,
¿ves?
Tiene una que es class name.
Así que ahora podríamos utilizar el text decoration, text decoration on.
Vamos a poner que tenga un color un poquito más bonito.
Y también podríamos hacerlo el hover.
Border, bottom, 2px, solid 0.9.
Y este style component, ahora lo vamos a importar aquí.
De hecho, si lo utilizamos aquí directamente, link nos lo importa.
Importado, automáticamente.
Y aquí podemos ver la diferencia, ¿vale?
Entre el primero, que está utilizando style link, y los otros.
Y la funcionalidad sigue funcionando correctamente.
Así que cualquier componente que acepte un class name,
lo puedes estilar con style components.
Si lo inspeccionamos este elemento,
vas a ver otra cosa que es muy interesante,
lo de style components, ¿vale?
Los style components, fíjate que lo que ha creado aquí es un hash.
Entonces ya no te tienes que preocupar nunca jamás, nunca más,
nunca más, el tema de...
No te tienes que preocupar de las class names.
Ya no te tienes que preocupar.
Ahora, a partir de ahora, style components lo que va a hacer es generarte un class name
que va a ser totalmente generado y que no va a colisionar con ningún otro, ¿vale?
Va a ser un hash único.
Así que esta es otra ventaja, por supuesto, que tienen los style components.
Al final, con los style components, además, tienes un montón de cosas más ventajas.
Por ejemplo, podrías pasarle props, podrías pasarle props.
Vamos a hacer una prop rápidamente para verla.
Por ejemplo, pongamos que tenemos este de aquí, que es un poquito especial, ¿no?
En lugar de style este, vamos a ponerle una variant, ¿vale?
Vamos a decir variante que será bold.
Esta variante, aquí nos deberían llegar las props y podemos decir que si la variant es igual a bold,
vamos a añadirle aquí un font height que sea bold.
Y si no, pues no hacemos nada.
Si vemos aquí en nuestra aplicación, vale, no lo ha hecho.
Bueno, ahí sale así, de hecho.
Lo que pasa es que puede ser que en este caso, como no es un elemento HTML,
sino que es un componente custom, digamos, igual no lo está detectando bien.
Vamos a hacer esto.
Vamos a hacerlo así, de esta forma, directamente, en lugar de la otra.
Props, props variant.
Si es bold, hacemos esto.
Entonces hacemos que es bold y si no, hacemos que es regular, ¿vale?
Vale, igual también es que se me había olvidado el punto y coma antes.
No me he fijado si había puesto el punto y coma.
Sí, vale, no había puesto el punto y coma, igual eso también era un problema.
Pero bueno, que podemos estilarlo a través de las props.
Luego hay que tener cuidado porque esta prop, obviamente, va a pasar al elemento, ¿ves?
Aunque aquí pone variant bold, pero no vamos a querer que esta prop llegue.
Entonces deberíamos filtrarla y esto también se puede hacer, ¿vale?
Para evitar que ciertas props pasen hacia abajo.
Y esto sería con lo de style components.
La verdad que lo de style components es que es súper rápido y súper indoloro.
Así que es una forma bastante rápida de hacer justamente este design system que comentábamos.
Porque además tienes un tema de theming también, que puedes cambiar los márgenes, espacios.
Lo bueno de style components es que ya tienes aquí, lo tienes con JavaScript.
Por lo tanto, imaginad que tenemos, yo qué sé, ¿ves que tengo este color aquí puesto a mano?
Pues ya podríamos tener aquí un theme.js, podríamos tener colors y el primary aquí y esto pues ponerlo así, de esta forma.
Y una vez que ya tienes en JavaScript, tienes todo tu theming, lo que puedes hacer es utilizarlo muy fácilmente.
Ya podrías importar los colores desde el theme y este colors, en lugar de utilizarlos así, ya podrías utilizarlo así.
Aunque ya os digo, esta sería la forma manual de hacerlo, ¿vale?
No hay formas que envuelven tu aplicación para que tengas acceso al tema directamente y ya está.
¿Vale? Pero bueno, esta sería una forma bastante sencilla de hacerlo que te permitiría, pues,
echarte de todo el poder que tienes con JavaScript.
Aquí tendríamos esto.
De forma que si un día digo, ah, pues no quiero azul, lo quiero rojo, pues, pues, ya lo tendríamos rojo.
Aquellos componentes que están utilizando, por supuesto, el style link.
Aquí vemos la diferencia, los que utilizan y los que no.
Y bueno, estas serían tres formas.
Obviamente hay un montón más, ¿vale?
No solo de Tailwind, sino que podríamos hablar de CSS Modules, podríamos hablar de SaaS,
podríamos hablar de un montón de cosas, pero podríamos estar aquí todo el día.
Solo te he comentado como dos formas diferentes de poder estilar tu aplicación.