Verwendung von CSS-Modulen für Gekapseltes Styling in React
CSS-Module ist ein Ansatz, der es ermöglicht, CSS-Klassennamen lokal auf bestimmte Komponenten zu beschränken. Dadurch kann CSS-Code modular und gekapselt geschrieben werden, was die Wahrscheinlichkeit von Stilkonflikten verringert und die Wartbarkeit der Styles erhöht. Tatsächlich hat sich dieser Ansatz als einer der am weitesten verbreiteten Methoden zur Organisation von React-Projekten etabliert.
Datei- und Ordnerstruktur
Angenommen, wir haben die folgende Benutzeroberfläche, die aus drei Komponenten besteht: VideoPlayer
, AuthorInformation
und VideoDescription
.
Wir werden nicht alle Komponenten und Styles in einer einzigen Datei zusammenfassen. Stattdessen richten wir für jede Komponente einen eigenen Ordner ein. In jedem Ordner erstellen wir eine jsx
-Datei für das Rendering und die Logik sowie eine css
-Datei für die Anwendung der Styles. Jede css
-Datei sollte mit module.css
enden, um Modularität zu gewährleisten. Die Struktur sieht daher wie folgt aus:
Hinweis
Dieser Ansatz bietet eine komfortable Lösung zur Erstellung von React-Komponenten und zum Schreiben von Styles. 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 verhindert Stilkonflikte.
Syntax
Untersuchen wir die Syntax für die Verwendung modularer Styles an einem Beispiel mit der Komponente VideoDescription
.
In der Datei VideoDescription.jsx
wird eine Komponente erstellt, die ein bestimmtes Markup generiert. Es gibt hierbei nichts besonders Neues oder Unbekanntes.
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 eine Klassenname zugewiesen werden soll. Zuerst muss die Datei VideoDescription.module.css
in die Datei VideoDescription.jsx
importiert werden. Dies kann mit folgender Syntax erreicht werden:
import <file_name> from "<file_path>";
<file_name>
kann ein beliebiges Wort sein, das mit der Datei assoziiert wird. Üblicherweise werden Namen wie:css
,styles
oder einfachs
verwendet;<file_path>
ist der korrekte Pfad zur Datei. Die Syntax ist bereits bekannt:./
.
Ergebnis:
import css from "./VideoDescription.module.css";
Um einem Element einen Klassennamen zuzuweisen, kann das Attribut className
verwendet werden. Innerhalb dieses Attributs wird der gewünschte Klassenname in geschweifte Klammern {}
gesetzt. Innerhalb der Klammern steht das spezifische Wort, 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 kann die Datei VideoDescription.module.css
geöffnet werden, um die Stile auf das p
-Element mit dem Klassennamen text
mithilfe des Klassenselektors anzuwenden:
.text {
background-color: lightgreen;
color: darkblue;
font-size: 24px;
}
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Awesome!
Completion rate improved to 2.17
Verwendung von CSS-Modulen für Gekapseltes Styling in React
Swipe um das Menü anzuzeigen
CSS-Module ist ein Ansatz, der es ermöglicht, CSS-Klassennamen lokal auf bestimmte Komponenten zu beschränken. Dadurch kann CSS-Code modular und gekapselt geschrieben werden, was die Wahrscheinlichkeit von Stilkonflikten verringert und die Wartbarkeit der Styles erhöht. Tatsächlich hat sich dieser Ansatz als einer der am weitesten verbreiteten Methoden zur Organisation von React-Projekten etabliert.
Datei- und Ordnerstruktur
Angenommen, wir haben die folgende Benutzeroberfläche, die aus drei Komponenten besteht: VideoPlayer
, AuthorInformation
und VideoDescription
.
Wir werden nicht alle Komponenten und Styles in einer einzigen Datei zusammenfassen. Stattdessen richten wir für jede Komponente einen eigenen Ordner ein. In jedem Ordner erstellen wir eine jsx
-Datei für das Rendering und die Logik sowie eine css
-Datei für die Anwendung der Styles. Jede css
-Datei sollte mit module.css
enden, um Modularität zu gewährleisten. Die Struktur sieht daher wie folgt aus:
Hinweis
Dieser Ansatz bietet eine komfortable Lösung zur Erstellung von React-Komponenten und zum Schreiben von Styles. 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 verhindert Stilkonflikte.
Syntax
Untersuchen wir die Syntax für die Verwendung modularer Styles an einem Beispiel mit der Komponente VideoDescription
.
In der Datei VideoDescription.jsx
wird eine Komponente erstellt, die ein bestimmtes Markup generiert. Es gibt hierbei nichts besonders Neues oder Unbekanntes.
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 eine Klassenname zugewiesen werden soll. Zuerst muss die Datei VideoDescription.module.css
in die Datei VideoDescription.jsx
importiert werden. Dies kann mit folgender Syntax erreicht werden:
import <file_name> from "<file_path>";
<file_name>
kann ein beliebiges Wort sein, das mit der Datei assoziiert wird. Üblicherweise werden Namen wie:css
,styles
oder einfachs
verwendet;<file_path>
ist der korrekte Pfad zur Datei. Die Syntax ist bereits bekannt:./
.
Ergebnis:
import css from "./VideoDescription.module.css";
Um einem Element einen Klassennamen zuzuweisen, kann das Attribut className
verwendet werden. Innerhalb dieses Attributs wird der gewünschte Klassenname in geschweifte Klammern {}
gesetzt. Innerhalb der Klammern steht das spezifische Wort, 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 kann die Datei VideoDescription.module.css
geöffnet werden, um die Stile auf das p
-Element mit dem Klassennamen text
mithilfe des Klassenselektors anzuwenden:
.text {
background-color: lightgreen;
color: darkblue;
font-size: 24px;
}
Danke für Ihr Feedback!