45

6 Formas de agregar estilos CSS en React

40903Puntos

hace 4 meses

Curso de Introducción a React.js
Curso de Introducción a React.js

Curso de Introducción a React.js

¡Aprende React.js, la librería más popular de JavaScript para crear aplicaciones web interactivas! Trabaja con componentes, propiedades, estado y efectos. Almacena tu información en Local Storage, implementa React Context para comunicar componentes y teletransporta componentes con React Portals. Crea tu primer proyecto web con React junto a tu profesor JuanDC

Empezar a usar React.js significa tomarnos con el dilema de los estilos. Entre tantos componentes es fácil equivocarnos y nombrar componentes o elementos con las mismas clases. Este simple error puede romper toda la UI.

¡No te preocupes! Aquí te traigo múltiples maneras en las que puedes introducir estilos en tus aplicaciones hechas con React.

Hoja de estilos externa 👀

Esta es la forma tradicional con la que empezamos a trabajar con los estilos. Es necesario utilizar algunas metodologías como BEM, OOCSS, ACSS o SMACSS para evitar escribir dos clases con el mismo nombre.

💡 Guía de BEM para CSS

Por lo general, siempre encontrarás los componentes de la siguiente forma:

/* styles.css */.card{
  border: 1px solid salmon;
  display: block;
  height: 340px;
  padding: 10px;
  width: 150px;
}

.card--header{
  padding: 10px;
  margin-botton: 5px;
  font-size: 20px;
}

.card--body{
  font-size: 18px;
  color: black;
}

.card--footer{
  color: gray;
  text-align: center;
}

import React from'react'import'./styles.css'const Card = () => (
  <divclassName="card"><divclassName="card--header"><h1>Title</h1></div><divclassName="card--body"><p>
      Description
     </p></div><divclassName="card--footer"><p>All rights reserved</p></div></div>
)

Tal vez esta es la forma más fácil de trabajar porque no requieres ninguna configuración extra para trabajar con estilos. Pero con la principal desventaja de que accidentalmente puedes sobrescribir los mismos estilos si no empleamos buenas prácticas (o sencillamente si tenemos un descuido). 😢

CSS Inline 🤔

Esta es una de las formas no tan comunes para estilizar tus componentes, aunque puede ayudarte a testear los estilos antes de pasarlos a un archivo css.

Puedes optar por una de estas dos alternativas para escribir estilos inline dentro de React, te recomiendo usar la segunda forma para tener una mejor organización.

  • Inline de la forma tradicional
import React from'react'const Character = () => (
  <divstyle={{display: "block"; }}>
    ...
  </div>
)
  • Declarando los estilos como un objeto
import React from'react'const Character = () => {
  const character = {
		display: "block",
		border: "1px solid salmon",
		height: "340px",
		padding: "10px",
		width: "150px"
  }
  
  const character__header = {
    padding: "10px",
  }

  const character__body = {
		color: "black"
  }

  return(
	  <divstyle={character}><divstyle={character__header}><h1>Title</h1></div><divstyle={character__body} ><p>
	        Description
	      </p></div></div>
  )
}

Al igual que con las hojas de estilos externas, para aplicar los estilos inline no necesitas ninguna configuración adicional en tu aplicación. Solo que esta forma de escribir estilos a la larga se vuelve algo tedioso, sin mencionar que cuando tienes una gran cantidad de estilos, tu componente se vuelve muy extenso en cuanto a líneas de código.

Module CSS 😎

La magia del CSS Modular es que nunca vas a pisar estilos en uno u otro lugar, debido a que al momento de compilar tu proyecto, los nombres de las clases cambiarán un poco para tener caracteres aleatorios, de tal forma que no tendrás que preocuparte por utilizar metodologías como BEM.

Para trabajar con estos módulos solo tienes que agregar .module antes del .css y después del nombre. Tus archivos deberían quedar con un nombre similar a buttons.module.css.

Lo último que tienes que saber acerca del css modular es que se tiene un atributo extra llamado composes para mezclar clases de una forma parecida a lo que hacen los preprocesadores, te dejo aquí un breve ejemplo del como usarla:

/* ./buttons.module.css */.red-color{
  background-color: red;
  border: 1px solid white; 
  color: white;
}

.button-red{
 composes: red-color;  
 font-size: 18px;
}

Puedes hacer muy descriptivos tus estilos de la siguiente forma:

/* ./styles.module.css */.container{
  width: 150px;
  padding: 10px;
}

.container--header{
  text-align: center;
}
/* ./types.module.css */.big{
  font-size: 24px;
}

.small{
  font-size: 14px;
}
import React from'react'import styles from'./styles.css'import types from'./types.css'const myComponent = () => (
  <div className={styles.div}>
    <div className={styles['.container--header']} >
      <h2 className={types.big} >
        Title
      </h2>
      <p className={types.small} >
        Loremp ipsum
      </p>
    </div>
  <div>
)

CSS in JS 😮

JavaScript está en todos lados, hasta en lo estilos, extendiendo las características de CSS para dotarlo de capacidades propias del lenguaje.

Existen múltiples librerías para poder emplear este método, pero una de las favoritas por muchos es Styled Components, por su poca complejidad para poder trabajar con ambas tecnologías.

Algunas de sus ventajas son las siguientes:

  • Evita importar estilos que no vas a utilizar.
  • Evita el sobreescribir estilos por accidente.
  • Crea temas de forma rápida y sencilla.
  • Crea configuraciones para tus estilos globales.

Styled Components no viene por defecto en React, por lo que deberás agregarlo de la siguiente manera 👇🏻

npm install --save styled-components

Una vez instalada la dependencia, puedes empezar a crear tus estilos en un archivo .js de la siguiente manera (no olvides exportarlos para usarlos en tus componentes).

// ./styles.jsimport styled from'styled-components'exportconst Container = styled.div`
	align-items: center;
	display: flex;
	justify-content: center;
	height: 200px;
	width: 300px;
  
`exportconst Header = styled.Header`
  border: 1px solid red;
  border-radius: 15px;
`exportconst Title = styled.h1`
  margin: 10px;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
`

Luego puedes importarlos como cualquier otro componente.

import React from'react'import { Container, Header, Title } from'./styles.js'const MyComponent = () => (
  <Container><Header><Title>I'm a title!</Title></Header></Container>
)

Preprocesadores 💻

React muestra una amplia compatibilidad con todos los preprocesadores como SASS, Less y Stylus para poder trabajar de una forma más eficiente con CSS. Recuerda que en Webpack deberás configurar un loader especial para cada uno de estos.

💡 Tip: Puedes combinarlos con Module CSS y sacarle un mayor provecho.

Sin más, para trabajar con alguno de estos, deberás agregar su propio loader (en el caso que trabajes con webpack) y hacer su debida configuración.

Poniendo el ejemplo con SASS las configuraciones serían similares a esta:

// webpack.config.jsmodule.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Crea el nodo "style" de JS Strings"style-loader",
          // Convierte CSS a CommonJS"css-loader",
          // Compila los estilos Sass a css"sass-loader",
        ],
      },
    ],
  },
};

A partir de aquí podrás empezar a escribir estilos con Sass de manera convencional:

/* ./header.scss */$principal-color: #121f3d;

h2 {
  color: $principal-color;
}
// ./header.jsximport React from'react'import"./header.scss"const Header = () => (
  <header><h2>Dark title</h2></header>
)

Frameworks de interfaz de usuario 📖

Una alternativa, la cual puede agilizar mucho el crear las vistas de nuestros componentes, es el usar alguno de los famosos frameworks de UI pensados para trabajar con React, como los siguientes:

  • MaterialUI
  • ElementalUI
  • React Boostrap
  • Ant design
  • Tailwind CSS

Cada framework te da componentes prediseñados para solo importarlos y evitar todo el estilado por tu parte.

Para ejemplificar, te daré una breve introducción de como utilizar MaterialUI, solo debes de seguir un par de pasos:

  1. Instalar las dependencias con npm de la siguiente manera: npm install @mui/material @emotion/react @emotion/styled
  2. Importar Roboto Font
<linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
  1. Importar la fuente de los íconos propios de MaterialUI
<linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
  1. Instalar los íconos con npm
    npm install @mui/icons-material

Con todo esto, podrás empezar a importar botones, headers, navbar, forms y demás a tus componentes en React de la siguiente forma:

// Example.jsximport * as React from'react';
import Button from'@mui/material/Button';

exportconst ExampleComponent = () => {
  return<Buttonvariant="contained">Hello World</Button>;
}

👀 Muy útil para ahorrar tiempo


¡Espero te sean de ayuda todas las alternativas que viste en este blogpost!

Cuéntame aquí abajo en los comentarios ¿Cuáles formas no conocías? ¿Qué forma te gustó más? ¿Conoces otra forma de agregar estilos?

Te dejo una recomendación de los mejores cursos donde puedes profesionalizarte con los estilos✨

Curso de Introducción a React.js
Curso de Introducción a React.js

Curso de Introducción a React.js

¡Aprende React.js, la librería más popular de JavaScript para crear aplicaciones web interactivas! Trabaja con componentes, propiedades, estado y efectos. Almacena tu información en Local Storage, implementa React Context para comunicar componentes y teletransporta componentes con React Portals. Crea tu primer proyecto web con React junto a tu profesor JuanDC
Leonardo de los angeles
Leonardo de los angeles
LeoCode0

40903Puntos

hace 4 meses

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
3
31513Puntos

Muy buenos consejos my buen leo, gracias por el blog, siempre regresa uno a repasar las opciones.

3
10272Puntos

No tenía idea de la existencia de algunos, pero muy interesantes. La verdad que sí puede llegar a ser un caos no seguir ningún estandar a medida que crece el proyecto. Gracias por el aporte; a probarlos!

1
3751Puntos

Muy interesante estos datos, pero tengo una duda, en el mundo real, cuál es la forma más recomendada?

2
40903Puntos
2 meses

En el mundo real, ocupamos TODAS.

No todas en un mismo proyecto, sino que, en algunos proyectos es más convenientes usar una u otra dependiendo tus necesidades

Por ejemplo, si es un proyecto pequeño, puedes optar por la forma tradicional de css

Si es un proyecto grande, el css modular es una gran opción

Si es un proyecto grande que necesita ser muy interactivo con los usuarios, CSS in JS resulta mejor

Si necesitas todo lo anterior pero también necesitas centrarte en la funcionalidad de tu aplicación, los frameworks de UI te ayudarán con eso

Un saludo!