El uso de un archivo CSS para estilizar componentes de React proviene de la estructura tradicional HTML-CSS. A continuación, se presenta una guía paso a paso sobre cómo utilizar un archivo CSS para aplicar estilos a componentes de React:

1. Crear un archivo CSS

Para comenzar, crear un archivo CSS independiente con la extensión .css. Este archivo puede ubicarse en la misma carpeta que el componente o en una carpeta dedicada específicamente a estilos, donde se organicen todos los archivos CSS.

Ejemplo:

2. Importar el archivo CSS

Utilizar la declaración 'import' para importar archivos CSS en el archivo del componente. Colocar esta declaración de importación en la parte superior del archivo del componente. Dentro de las comillas '', especificar la ruta de archivo correspondiente.

Ejemplo:

// Import the CSS file
import './index.css';

Si el archivo CSS se encuentra en la carpeta styles, la declaración de importación tendría la siguiente sintaxis:

// Import the CSS file from a folder
import './styles/index.css';

Nota

Utilizar la notación de punto y barra ./ para hacer referencia a un archivo dentro del mismo directorio. Para acceder a un archivo fuera de la carpeta actual y navegar al directorio principal, utilizar dos puntos y una barra ../.

3. Aplicar estilos al componente

Una vez que los estilos han sido importados, el componente reconoce la presencia del CSS. Por lo tanto, se pueden emplear selectores de CSS y nombres de clase para estilizar los elementos. La única diferencia es que, en aplicaciones React, se utiliza el atributo className en lugar del atributo class que se usa en archivos HTML.

Ejemplo:

const Block = () => (
  <div className="container">
    <h1 className="title">Heading</h1>
    <p className="description">Description</p>
  </div>
);

Ahora se pueden utilizar las clases CSS container, title y description para aplicar estilos a los elementos dentro del componente Block.

Añadir estilos

En este punto, se puede abrir el archivo CSS y aplicar estilos a los nombres de clase definidos. Por ejemplo, el archivo index.css puede contener los siguientes estilos:

.container {
  background-color: #f0f0f0;
  padding: 20px;
}

.title {
  color: blue;
  font-size: 24px;
}

.description {
  color: green;
  font-size: 16px;
}

Siguiendo estos pasos, se aplicarán los estilos definidos en el archivo CSS a los elementos correspondientes en el componente React.

Código completo de la aplicación: