Cómo agregar una hoja de estilo de módulos CSS a su componente React en 4 simples pasos

Digamos que le gustaría agregar una hoja de estilo de módulos CSS a su proyecto. Puede encontrar la guía de Create React App aquí, pero esencialmente, y como dice la guía, los módulos CSS le permiten usar el mismo selector CSS en diferentes archivos sin preocuparse por los conflictos de nombres. Esto funciona porque a cada elemento HTML en su archivo que desea diseñar se le asigna automáticamente un nombre de clase único .

Esto puede parecer bastante confuso al principio, pero en realidad el proceso para implementar módulos CSS se puede simplificar a solo 4 pasos, como se demuestra en el siguiente ejemplo.

Agregar CSS modular a un componente simple

  1. Una característica de React es que los módulos CSS están "activados" para los archivos que terminan con la .module.cssextensión. Cree el archivo CSS con un nombre de archivo específico en el siguiente formato:
Link.module.css

2. Importe el estilo a su componente:

import styles from ‘../styling/components/Link.module.css’

3. Los estilos en su archivo CSS pueden seguir su convención de nomenclatura preferida, por ejemplo:

.bold { font-weight: bold;}

4. El estilo se aplica al elemento HTML de la siguiente manera:

className={styles.bold}

¡Y eso es!

Crédito de la foto: Adrian Swancar en Unsplash