CSS-Module ist ein Ansatz, der es uns ermöglicht, CSS-Klassennamen lokal auf bestimmte Komponenten zu beschränken. Es bietet eine Möglichkeit, CSS-Code modular und gekapselt zu schreiben, wodurch die Wahrscheinlichkeit von Stilkonflikten verringert und die Stile wartbarer gemacht werden. Tatsächlich ist es zu einem der am weitesten verbreiteten Ansätze zur Organisation von React-Projekten geworden.

Datei-Ordner-Organisation

Angenommen, wir haben die folgende Benutzeroberfläche, die aus drei Komponenten besteht: VideoPlayer, AuthorInformation und VideoDescription.

Wir werden nicht alle Komponenten und Stile in einer einzigen Datei konsolidieren. Stattdessen werden wir für jede Komponente einen separaten Ordner einrichten. In jedem Ordner erstellen wir eine jsx-Datei für Rendering- und Logikzwecke und eine css-Datei zum Anwenden von Stilen. Jede css-Datei sollte am Ende module.css haben, um Modularität zu erreichen. Somit würde die Struktur wie folgt aussehen:

Hinweis

Dieser Ansatz bietet eine praktische Lösung für die Erstellung von React-Komponenten und das Schreiben von Stilen. Er stellt sicher, dass jede Komponente isoliert ist und effektiv wiederverwendet werden kann. Das lokale Scoping von Klassennamen verbessert die Codeorganisation, fördert die Wiederverwendbarkeit und vermeidet Stilkonflikte.

Syntax

Lassen Sie uns die Syntax der Verwendung modularer Stile für eine Komponente erkunden, am Beispiel der VideoDescription-Komponente.

Innerhalb der VideoDescription.jsx erstellen wir eine Komponente, die ein bestimmtes Markup generiert. Es gibt nichts besonders Neues oder Unbekanntes daran.

const VideoDescription = () => (
  <p>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Delectus accusamus
    iure amet officia? Ratione harum, mollitia rem, maxime eveniet totam
    cupiditate explicabo omnis, atque iure architecto officiis praesentium
    libero quae.
  </p>
);

Der Unterschied entsteht, wenn wir einen Klassennamen anwenden möchten. Zuerst müssen wir die Datei VideoDescription.module.css in die Datei VideoDescription.jsx importieren. Dies können wir mit der folgenden Syntax erreichen:

import <file_name> from "<file_path>";

• <file_name> kann jedes Wort sein, das wir mit der Datei assoziieren. Im Allgemeinen wird der Name wie folgt vergeben: css, styles oder einfach s;
• <file_path> ist der korrekte Pfad zur Datei. Wir kennen bereits die Syntax: ./.

Ergebnis:

import css from "./VideoDescription.module.css";

Um einem Element einen Klassennamen zuzuweisen, können wir das Attribut className verwenden. Innerhalb dieses Attributs schließen wir den gewünschten Klassennamen in geschweifte Klammern {} ein. Innerhalb der Klammern fügen wir das spezifische Wort ein, das mit der Styles-Datei assoziiert ist, gefolgt von einem Punkt . und dem Klassennamen. Ergebnis: className={css.text}. text ist der tatsächliche Klassenname.

import css from "./VideoDescription.module.css";

const VideoDescription = () => (
  <p className={css.text}>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Delectus accusamus
    iure amet officia? Ratione harum, mollitia rem, maxime eveniet totam
    cupiditate explicabo omnis, atque iure architecto officiis praesentium
    libero quae.
  </p>
);

Jetzt können wir die Datei VideoDescription.module.css öffnen und die Stile auf das p-Element mit dem Klassennamen text unter Verwendung des Klassenselektors anwenden:

.text {
  background-color: lightgreen;
  color: darkblue;
  font-size: 24px;
}