CSS-Module in React sind eine Möglichkeit, CSS durch automatische Generierung eindeutiger Klassennamen zu erweitern. Dies verhindert Klassennamenkollisionen in großen Anwendungen und ermöglicht modulare Stile. So können Sie CSS-Module in einem React-Projekt verwenden:

1. Einrichtung

Standardmäßig unterstützt React CSS-Module. Sie müssen Ihrer CSS-Datei nur die Erweiterung .module.css geben.

2. Beispiel-Setup

Dateistruktur:

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

Button.module.css:

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

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

Button.js:

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

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

export default Button;

So funktioniert es:

• Button.module.css: Sie definieren CSS-Regeln wie jede normale CSS-Datei.
• styles.button: Die Klassennamen aus dem CSS-Modul werden als JavaScript-Objekt importiert. Sie referenzieren sie mit „styles.className“.

Vorteile:

• Bereichsstile: Jede Klasse ist lokal auf die Komponente beschränkt, wodurch Namenskollisionen vermieden werden.
• Wartbarkeit: Wenn Ihre Anwendung wächst, bleibt Ihr CSS modular und einfacher zu verwalten.

Lassen Sie mich wissen, wenn Sie in bestimmten Fällen Hilfe benötigen!