6 Formas de agregar estilos CSS en React

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
• TailwindCSS

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"
/>

3. Importar la fuente de los íconos propios de MaterialUI

<linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>

4. 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 React.js
• Curso de TailwindCSS
• Curso de React.js con Vite.js y TailwindCSS