Componentes de React: añadir CSS con código limpio
Lee este post en Inglés aquí.
A la hora de diseñar aplicaciones con React, hay muchas formas de añadirle estilo a los componentes. Las que conocía hasta ahora eran las siguientes:
- Importar un fichero de CSS con las clases necesarias y usar la propiedad “className” de JSX para añadirlas al componente.
- Usar la propiedad “style” para añadir estilo en línea.
El inconveniente de la primera opción es que hay que crear un fichero adicional para crear un componente y se complica un poco el mantenimiento del código. Además, hay que evitar manualmente la colisión de nombres de clases entre componentes.
Por otro lado, el principal inconveniente de la segunda opción es que no se puede copiar CSS desde el inspector del navegador y pegarlo en nuestro código, o viceversa, porque la propiedad “style” de nuestro componente recibe un objeto y las propiedades de los objetos no pueden tener el carácter “-” en el nombre, así que hay que reescribir las propiedades. Además, el valor de la propiedad debe entrecomillarse para convertirla en texto. Todo esto ralentiza el desarrollo porque tienes que volver a escribir lo que pruebas en el navegador. Por ejemplo, para añadir el siguiente fragmento de CSS a un componente:
element.style {
min-height: 626px;
border: 1px solid red;
background-color: white;
}Tendríamos que crear el siguiente objeto en nuestro código:
const style = {
minHeight: '626px',
border: '1px solid red',
backgroundColor: 'white'
};En este post comparto una forma limpia para estilar componentes usando “styled-components”.
Styled-components es una librería que crea componentes de React con estilos embebidos usando plantillas literales.
Algunas de las ventajas de esta librería son las siguientes:
- Crea nombres de clase automáticamente para evitar las colisiones.
- Las plantillas usan la sintaxis de CSS.
- Permite renderizado condicional en base a propiedades.
- Agrega los prefijos de los navegadores automáticamente.
Ejemplo de uso
Para instalar la librería, hay que ejecutar el siguiente comando (se pueden omitir los tipos si no se usa TypeScript, pero en este caso yo lo uso):
npm install styled-components @types/styled-componentsImagina que quieres crear una lista de elementos y que el color de cada elemento, así como el cursor, cambie cuando se haga clic sobre él.
Si no se usara la librería, se puede conseguir escribiendo el siguiente código, donde uso una función para obtener el estilo a partir del estado del componente (lo escribo directamente en el fichero index.tsx para simplificar):
Y el resultado, después de clicar sobre el elemento “Three”, sería el de la siguiente imagen:
Si usáramos la librería, podría reemplazar la función de estilo por un componente que puede interpolar un fragmento de CSS dependiendo del valor de la propiedad “selected”. El código resultante es el siguiente:
Y el resultado, después de clicar sobre el elemento “Three”, sería el de la siguiente imagen:
La extensión “vscode-styled-components” para Visual Studio Code es muy útil para trabajar con esta librería, porque añade resaltado de sintaxis para las plantillas y permite autocompletado de CSS.
