Si bien los estilos en línea son útiles para estilos pequeños o dinámicos, la mayoría de las aplicaciones reales dependen de archivos CSS externos. Este enfoque mantiene los estilos separados de la lógica del componente y facilita su gestión a medida que los proyectos crecen.

React admite CSS externo de forma nativa. Se puede escribir CSS regular y aplicarlo a los componentes usando nombres de clase, igual que en el desarrollo web tradicional.

Creación de un archivo CSS externo

Primero, crea un archivo CSS y define tus estilos:

/* styles.css */
.title {
  font-size: 32px;
  font-weight: 700;
  color: rebeccapurple;
}

Este archivo CSS contiene una clase simple que puede reutilizarse en varios componentes.

Importar CSS en un componente

Para utilizar los estilos, importa el archivo CSS en el archivo de tu componente:

import "./styles.css";

const App = () => (
  <>
    <h1 className="title">App title</h1>
  </>
);

En React, el atributo class se escribe como className porque class es una palabra reservada en JavaScript.

Cómo funciona el CSS externo en React

Los archivos CSS se aplican globalmente por defecto. Cualquier componente puede utilizar una clase definida en un archivo CSS importado. Los estilos se comportan de la misma manera que en HTML y CSS estándar. Esto hace que el CSS externo sea familiar y fácil de usar, especialmente para desarrolladores provenientes del desarrollo web tradicional.

Cuándo usar CSS externo

El CSS externo es una buena opción cuando:

• Los estilos se comparten entre varios componentes;
• Los diseños se vuelven más complejos;
• Se desea una separación clara entre la estructura y el estilo.

Para proyectos más grandes, el CSS externo suele conducir a un código más limpio y fácil de mantener.