Los módulos CSS en React son una forma de ampliar el alcance de CSS generando automáticamente nombres de clase únicos. Esto evita colisiones de nombres de clases en aplicaciones grandes y permite estilos modulares. Así es como puedes usar módulos CSS en un proyecto de React:

1. Configuración

De forma predeterminada, React admite módulos CSS. Sólo necesitas nombrar tu archivo CSS con la extensión .module.css.

2. Ejemplo de configuración

Estructura del archivo:

src/
├── components/
│   ├── Button.js
│   ├── Button.module.css

Botón.módulo.css:

.button {
  background-color: #6200ea;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.button:hover {
  background-color: #3700b3;
}

Botón.js:

import React from 'react';
import styles from './Button.module.css';

const Button = () => {
  return (
    
      Click Me
    
  );
}

export default Button;

Cómo funciona:

• Button.module.css: Defines reglas CSS como cualquier archivo CSS normal.
• styles.button: Los nombres de clase del módulo CSS se importan como un objeto JavaScript. Puedes hacer referencia a ellos usando estilos.className.

Beneficios:

• Estilos con alcance: cada clase tiene un alcance local para el componente, lo que evita colisiones de nombres.
• Mantenibilidad: a medida que su aplicación crece, su CSS sigue siendo modular y más fácil de administrar.

¡Avísame si necesitas ayuda con casos específicos!