So stylen Sie React-Komponenten mit CSS-Modulen

So stylen Sie React-Komponenten mit CSS-Modulen

CSS-Module bieten eine Möglichkeit, CSS-Klassennamen lokal festzulegen. Sie müssen sich keine Gedanken über das Überschreiben von Stilen machen, wenn Sie denselben Klassennamen verwenden.





Finden Sie heraus, wie CSS-Module funktionieren, warum Sie sie verwenden sollten und wie Sie sie in einem React-Projekt implementieren.



Was sind CSS-Module?

Das CSS-Module docs Beschreiben Sie ein CSS-Modul als eine CSS-Datei, deren Klassennamen standardmäßig lokal begrenzt sind. Dadurch können Sie CSS-Variablen mit gleichem Namen in verschiedenen CSS-Dateien ansprechen.





Sie schreiben CSS-Modulklassen wie normale Klassen. Dann generiert der Compiler eindeutige Klassennamen, bevor er das CSS an den Browser sendet.

Betrachten Sie beispielsweise die folgende .btn-Klasse in einer Datei namens styles.modules.css:



.btn { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
}

Um diese Datei zu verwenden, müssen Sie sie in eine JavaScript-Datei importieren.

import styles from "./styles.module.js"

Um nun auf die .btn-Klasse zu verweisen und sie in einem Element verfügbar zu machen, würden Sie die Klasse wie unten gezeigt verwenden:



So ändern Sie den Hintergrund eines Bildes 
class="styles.btn"

Der Build-Prozess ersetzt die CSS-Klasse durch einen eindeutigen Namen des Formats wie _styles__btn_118346908.

Die Eindeutigkeit der Klassennamen bedeutet, dass selbst wenn Sie denselben Klassennamen für verschiedene Komponenten verwenden, diese nicht kollidieren. Sie können eine größere Codeunabhängigkeit garantieren, da Sie die CSS-Stile einer Komponente in einer einzigen Datei speichern können, die für diese Komponente spezifisch ist.



Dies vereinfacht das Debuggen, insbesondere wenn Sie mit mehreren Stylesheets arbeiten. Sie müssen nur das CSS-Modul für eine bestimmte Komponente ausfindig machen.

Mit CSS-Modulen können Sie auch mehrere Klassen über die kombinieren komponiert Stichwort. Betrachten Sie beispielsweise die folgende .btn-Klasse oben. Sie könnten diese Klasse in anderen Klassen „erweitern“, indem Sie composes verwenden.

Für eine Senden-Schaltfläche könnten Sie Folgendes haben:

.btn { 
    /* styles */ 
} 
  
.submit { 
    composes: btn; 
    background-color: green; 
    color:#FFFFFF 
}

Dies kombiniert die Klassen .btn und .submit. Sie können auch Stile aus einem anderen CSS-Modul wie folgt zusammenstellen:

.submit { 
    composes:primary from "./colors.css" 
    background-color: green; 
}

Beachten Sie, dass Sie die Compose-Regel vor anderen Regeln schreiben müssen.

So verwenden Sie CSS-Module in React

Wie Sie CSS-Module in React verwenden, hängt davon ab, wie Sie die React-Anwendung erstellen.

Wenn Sie create-react-app verwenden, werden CSS-Module standardmäßig eingerichtet. Wenn Sie die Anwendung jedoch von Grund auf neu erstellen, müssen Sie CSS-Module mit einem Compiler wie Webpack konfigurieren.

Um diesem Tutorial zu folgen, sollten Sie Folgendes haben:

  • Auf Ihrem Computer installierter Knoten.
  • Ein grundlegendes Verständnis der ES6-Module.
  • Ein Grund Verständnis von React .

Erstellen einer React-Anwendung

Um die Dinge einfach zu halten, können Sie verwenden Erstellen-Reagieren-App um eine React-App zu rüsten.

Führen Sie diesen Befehl aus Erstellen Sie ein neues React-Projekt sogenannte React-CSS-Module:

npx create-react-app react-css-modules

Dadurch wird eine neue Datei namens „react-css-modules“ mit allen Abhängigkeiten generiert, die für den Einstieg in React erforderlich sind.

Erstellen einer Schaltflächenkomponente

In diesem Schritt erstellen Sie eine Button-Komponente und ein CSS-Modul namens Button.module.css. Erstellen Sie im Ordner src einen neuen Ordner namens Components. Erstellen Sie in diesem Ordner einen weiteren Ordner namens Button. In diesem Ordner fügen Sie die Button-Komponente und ihre Stile hinzu.

Navigieren Sie zu src/Komponenten/Schaltfläche und erstellen Sie Button.js.

export default function Button() { 
    return ( 
        <button>Submit</button> 
    ) 
}

Erstellen Sie als Nächstes eine neue Datei namens Button.module.css und fügen Sie Folgendes hinzu.

.btn { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
    border-radius: 4px; 
    border: none; 
}

Um diese Klasse in der Button-Komponente zu verwenden, importieren Sie sie als Stile und verweisen Sie wie folgt im Klassennamen des Button-Elements darauf:

import styles from "./Button.module.css" 
  
export default function Button() { 
    return ( 
        <button className={styles.btn}>Submit</button> 
    ) 
}

Dies ist ein einfaches Beispiel, das zeigt, wie eine einzelne Klasse verwendet wird. Möglicherweise möchten Sie Stile für verschiedene Komponenten freigeben oder sogar Klassen kombinieren. Dazu können Sie das bereits in diesem Artikel erwähnte Schlüsselwort composes verwenden.

Zusammensetzung verwenden

Ändern Sie zunächst die Button-Komponente mit dem folgenden Code.

import styles from "./Button.module.css" 
  
export default function Button({type="primary", label="Button"}) { 
    return ( 
        <button className={styles[type]}>{label}</button> 
    ) 
}

Dieser Code macht die Button-Komponente dynamischer, indem er einen Typwert als Prop akzeptiert. Dieser Typ bestimmt den Klassennamen, der auf das Schaltflächenelement angewendet wird. Wenn die Schaltfläche also eine Senden-Schaltfläche ist, lautet der Klassenname „Senden“. Wenn es „Fehler“ ist, lautet der Klassenname „Fehler“ und so weiter.

Um das Schlüsselwort composes zu verwenden, anstatt alle Stile für jede Schaltfläche von Grund auf neu zu schreiben, fügen Sie Folgendes zu Button.module.css hinzu.

.btn { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
    border-radius: 4px; 
    border: none; 
} 
  
.primary { 
    composes: btn; 
    color: #FFFFFF; 
    background-color: #6E41E2; 
} 
  
.secondary { 
    composes: btn; 
    color: #6E41E2; 
    background-color: #FFFFFF; 
}

In diesem Beispiel verwenden die primäre Klasse und die sekundäre Klasse die btn-Klasse. Auf diese Weise reduzieren Sie die Menge an Code, die Sie schreiben müssen.

Sie können dies mit einem externen CSS-Modul namens noch weiter vorantreiben colors.module.css , die die in der Anwendung verwendeten Farben enthält. Sie könnten dieses Modul dann in anderen Modulen verwenden. Erstellen Sie beispielsweise die Datei colors.module.css im Stammverzeichnis des Ordners „Components“ mit dem folgenden Code:

.primaryBg { 
    background-color: #6E41E2 
} 
.secondaryBg { 
    background-color: #FFFFFF 
} 
  
.primaryColor { 
    color: #FFFFFF 
} 
.secondaryColor { 
    color: #6E41E2 
}

Ändern Sie nun in der Datei Button/Button.module.css die primären und sekundären Klassen, um die obigen Klassen wie folgt zu verwenden:

.primary { 
    composes: btn; 
    composes: primaryColor from "../colors.module.css"; 
    composes: primaryBg from "../colors.module.css"; 
} 
  
.secondary { 
    composes: btn; 
    composes: secondaryColor from "../colors.module.css"; 
    composes: secondaryBg from "../colors.module.css"; 
}

Sass mit CSS-Modulen

Sie können CSS-Module verwenden, um die Modularität Ihrer Codebasis zu verbessern. Beispielsweise können Sie eine einfache CSS-Klasse für eine Schaltflächenkomponente erstellen und CSS-Klassen durch Komposition wiederverwenden.

Um Ihre Verwendung von CSS-Modulen zu verbessern, verwenden Sie Sass. Sass – Syntactically Awesome Style Sheets – ist ein CSS-Präprozessor, der eine Menge Funktionen bietet. Sie beinhalten Unterstützung für Verschachtelung, Variablen und Vererbung, die in CSS nicht verfügbar sind. Mit Sass können Sie Ihrer Anwendung komplexere Funktionen hinzufügen.