Las hojas de estilo modulares son una característica en CSS que permite escribir CSS de manera que alcance y se aplique solo a un archivo o un componente a la vez.
En ReactJS, las hojas de estilo modulares se utilizan junto con el sistema de importación de módulos de ES6.
Aquí hay un ejemplo paso a paso de cómo podrías usarlo.
1. Primero, debes crear el archivo CSS que deseas usar. Por ejemplo, podrías tener un componente `Button` con su correspondiente archivo CSS `Button.module.css`.
```css
/* Button.module.css */
.button {
background-color: blue;
color: white;
}
```
2. Luego, importas el archivo CSS en tu componente de React, pero lo haces de una manera especial. Tienes que agregar `.module` antes de `.css`. Así es como le indicas a React que este CSS es un módulo.
```jsx
import styles from ‘./Button.module.css’;
```
3. Ahora, puedes usar las clases de tu CSS como si fueran un objeto JavaScript.
```jsx
function Button() {
return ;
}
```
En este ejemplo, `styles.button` se refiere a la clase `.button` en `Button.module.css`.
La ventaja principal de usar CSS Modules es que evita conflictos de nombres en tus estilos. Es decir, puedes tener clases con el mismo nombre en diferentes archivos CSS y no te preocuparás por los estilos que se sobrescriben entre sí.
Además, con CSS Modules puedes disfrutar de todas las ventajas del CSS, como selectores, pseudo-selectores, medias queries, animaciones, etc. Sin tener que preocuparte por los problemas de nombres o el alcance de las clases CSS.
Cabe mencionar que con herramientas como `create-react-app`, CSS Modules son compatibles de manera predeterminada. Si estás configurando tu propio conjunto de herramientas con webpack, deberás configurar el loader de CSS para soportar CSS Modules.
