[Traducción] 4 formas de estilizar componentes de reacción

Hola Habr! Les presento la traducción del artículo “4 formas de reaccionar con estilo a los componentes” .



Hasta la fecha, se han desarrollado muchas formas de diseñar componentes React. Desde bibliotecas hasta el uso de archivos CSS tradicionales. La elección es bastante extensa y lo más probable es que se ajuste a sus preferencias. Aquí hay cuatro formas de diseñar componentes React.

CSS en línea

Como JSX se convierte en elementos HTML, esto le permite usar el atributo de estilo. Los estilos se pueden aplicar a los elementos simplemente pasándoles un objeto con propiedades. Se verá más o menos así:



Sin embargo, este método es muy limitado. No puede usar pseudo-selectores, como: hover, así como consultas de medios. Pero esto no significa que no deba usarse. Se puede usar cuando solo hay 2 o 3 propiedades que no requieren pseudo-selectores o consultas de medios, y / o en situaciones donde se requiere el uso de condiciones en estilos.

Bibliotecas de estilos

Me gusta aprender nuevas bibliotecas o marcos. Este método es mi favorito para diseñar componentes React. Hay muchas bibliotecas de estilos que le permiten no solo estilizar componentes, sino también proporcionar "superfunciones" adicionales, como las llamo, junto con todas las características CSS que hacen las cosas mucho más fáciles.

Un ejemplo de uso podría verse así:



Lo anterior es un ejemplo del uso de la biblioteca de componentes con estilo.

Wrapper se llama un componente con estilo. Los estilos se definen en la constante Wrapper, que simplemente crea un componente con estos estilos. Simplemente determine qué tipo de elemento necesita, por ejemplo: div, header o img, y úselo como si fuera un componente React. No elementos HTML, solo componentes, lo que hace que el código sea más limpio y fácil de leer.

Esto es solo mi preferencia. Tal vez le guste usar un div o ver elementos HTML nativos. No hay problema! Khan Academy desarrolló la biblioteca Afrodita, que usa elementos HTML pero adjunta estilos al componente usando el atributo className.

Mi artículo sobre Afrodita

Estas bibliotecas también tienen muchas características adicionales que te permiten hacer cosas increíbles. Hay muchas bibliotecas, por lo que solo debe intentar ver cuál se quedará con usted.

Aquí están los dos más populares en este momento:

https://www.styled-components.com/
https://glamorous.rocks/

Estilos externos

Puede escribir estilos en un archivo CSS externo e importarlos al componente cuando sea necesario. Este fue probablemente el primer método que aprendió cuando comenzó a aprender React. Sin embargo, al agregar elementos adicionales, hay un problema al nombrarlos. Todos los estilos están en el alcance global. Por ejemplo, tenía dos elementos con el mismo nombre creados por usted o su compañero de equipo, en cuyo caso puede encontrar este problema.

Módulos CSS

Los módulos CSS son muy similares a escribir CSS en archivos externos. La única diferencia es que los estilos están encapsulados, en contraste con el uso tradicional de archivos CSS externos. Esto significa que los estilos no entrarán en conflicto entre sí ni se sobrescribirán entre sí. Utiliza los mismos métodos que se usan en CSS tradicional. También permite el uso de todas las buenas metodologías, como BEM. Puedes leer más aquí:

https://github.com/css-modules/css-modules

Independientemente de lo que decida utilizar: CSS tradicional, módulos CSS, CSS en línea, bibliotecas de estilos o una combinación de estos métodos, en mi opinión, todo se reduce a sus preferencias y las preferencias de su equipo.

Gracias por leer ¿Encontró un error? Siéntete libre de contarme sobre ella. Que tengas un buen día!