Wir alle kennen die Standardmethode, ein Stylesheet zu verknüpfen, im <head> eines HTML-Dokuments, richtig? Das ist nur eine von mehreren Möglichkeiten, wie wir CSS schreiben können. Aber wie sieht es mit dem Styling von Dingen in einer Single-Page-Application (SPA) aus, sagen wir in einem React-Projekt?
Es stellt sich heraus, dass es mehrere Möglichkeiten gibt, eine React-Anwendung zu stylen. Einige überschneiden sich mit traditionellem Styling, andere nicht so sehr. Aber zählen wir mal alle Möglichkeiten auf, wie wir das machen können.
Externe Stylesheets importieren
Wie der Name schon sagt, kann React CSS-Dateien importieren. Der Prozess ist ähnlich wie beim Verknüpfen einer CSS-Datei im <head> von HTML.
- Erstellen Sie eine neue CSS-Datei in Ihrem Projektverzeichnis.
- Schreiben Sie CSS.
- Importieren Sie sie in die React-Datei.
So wie das
import "./style.css";Das geschieht normalerweise am Anfang der Datei, wo auch andere Imports stattfinden.
import { React } from "react";
import "./Components/css/App.css";
function App() {
return (
<div className="main">
</div>
);
}
export default App;In diesem Beispiel wird eine CSS-Datei in eine App.js aus dem Ordner /Components/css importiert.
Inline-Styles schreiben
Sie hören vielleicht oft, dass Inline-Styling nicht gerade gut für die Wartbarkeit und Ähnliches ist, aber es gibt definitiv Situationen (hier ist eine!), in denen es sinnvoll ist. Und die Wartbarkeit ist in React weniger ein Problem, da sich das CSS oft sowieso in derselben Datei befindet.
Dies ist ein sehr einfaches Beispiel für Inline-Styling in React.
<div className="main" style={{color:"red"}}>Ein besserer Ansatz ist jedoch die Verwendung von Objekten.
- Erstellen Sie zuerst ein Objekt, das Stile für verschiedene Elemente enthält.
- Fügen Sie es dann einem Element mit dem Attribut
stylehinzu und wählen Sie dann die zu stylende Eigenschaft aus.
Schauen wir uns das im Kontext an.
import { React } from "react";
function App() {
const styles = {
main: {
backgroundColor: "#f1f1f1",
width: "100%",
},
inputText: {
padding: "10px",
color: "red",
},
};
return (
<div className="main" style={styles.main}>
<input type="text" style={styles.inputText}></input>
</div>
);
}
export default App;Dieses Beispiel enthält ein styles-Objekt, das zwei weitere Objekte enthält, eines für die Klasse .main und das andere für ein Texteingabefeld. Diese enthalten Stilregeln, ähnlich denen, die wir in einem externen Stylesheet erwarten würden. Diese Objekte werden dann auf das Attribut style von Elementen angewendet, die im zurückgegebenen Markup enthalten sind.
Beachten Sie, dass geschweifte Klammern verwendet werden, wenn auf Stile verwiesen wird, anstelle der Anführungszeichen, die wir normalerweise in reinem HTML verwenden würden.
CSS-Module verwenden
CSS Modules... was zum Teufel ist damit passiert, richtig? Sie haben den Vorteil von lokal angezeigten Variablen und können direkt neben React verwendet werden. Aber was genau sind sie noch mal?
Zitat aus der Dokumentation des Repositories
CSS Modules funktioniert, indem einzelne CSS-Dateien sowohl in CSS als auch in Daten kompiliert werden. Die CSS-Ausgabe ist normales, globales CSS, das direkt in den Browser eingefügt oder zusammengefügt und für die Produktionsnutzung in eine Datei geschrieben werden kann. Die Daten werden verwendet, um die menschenlesbaren Namen, die Sie in den Dateien verwendet haben, den global sicheren Ausgaben-CSS zuzuordnen.
Einfacher ausgedrückt: CSS Modules erlaubt es uns, den gleichen Klassennamen in mehreren Dateien ohne Konflikte zu verwenden, da jedem Klassennamen ein eindeutiger programmatischer Name gegeben wird. Dies ist besonders nützlich in größeren Anwendungen. Jeder Klassenname ist lokal auf die spezifische Komponente beschränkt, in die er importiert wird.
Ein CSS-Module-Stylesheet ähnelt einem regulären Stylesheet, nur mit einer anderen Erweiterung (z. B. styles.module.css). Hier ist die Einrichtung:
- Erstellen Sie eine Datei mit der Erweiterung
.module.css. - Importieren Sie dieses Modul in die React-App (wie wir es zuvor gesehen haben).
- Fügen Sie einem Element oder einer Komponente eine
classNamehinzu und referenzieren Sie den jeweiligen Stil aus den importierten Stilen.
Super einfaches Beispiel.
/* styles.module.css */
.font {
color: #f00;
font-size: 20px;
}
import { React } from "react";
import styles from "./styles.module.css";
function App() {
return (
<h1 className={styles.heading}>Hello World</h1>
);
}
export default App;Styled Components verwenden
Haben Sie Styled Components verwendet? Es ist ziemlich beliebt und ermöglicht es Ihnen, benutzerdefinierte Komponenten mit echtem CSS in Ihrem JavaScript zu erstellen. Eine Styled-Komponente ist im Grunde eine React-Komponente mit – machen Sie sich bereit – Stilen. Einige der Funktionen umfassen eindeutige Klassennamen, dynamische Stile und eine bessere Verwaltung des CSS, da jede Komponente ihre eigenen separaten Stile hat.
Installieren Sie das Styled Components npm-Paket in der Kommandozeile.
npm install styled-componentsAls Nächstes importieren Sie es in die React-App.
import styled from 'styled-components'Erstellen Sie eine Komponente und weisen Sie ihr eine gestylte Eigenschaft zu. Beachten Sie die Verwendung von Template-Literalen, die durch Backticks im Wrapper-Objekt gekennzeichnet sind.
import { React } from "react";
import styled from "styled-components";
function App() {
const Wrapper = styled.div`
width: 100%;
height: 100px;
background-color: red;
display: block;
`;
return <Wrapper />;
}
export default App;Die obige Wrapper-Komponente wird als Div gerendert, das diese Stile enthält.
Bedingtes Styling
Einer der Vorteile von Styled Components ist, dass die Komponenten selbst funktional sind, d. h. Sie können Props innerhalb des CSS verwenden. Dies eröffnet die Möglichkeit für bedingte Anweisungen und das Ändern von Stilen basierend auf einem Zustand oder einer Prop.
Hier ist eine Demo, die das zeigt.
Hier manipulieren wir die display-Eigenschaft des Divs anhand des Anzeigezustands. Dieser Zustand wird durch eine Schaltfläche gesteuert, die den Zustand des Divs beim Klicken umschaltet. Dies wiederum schaltet zwischen den Stilen zweier verschiedener Zustände um.
Bei Inline-if-Anweisungen verwenden wir ein ? anstelle der üblichen if/else-Syntax. Der else-Teil steht nach dem Semikolon. Und denken Sie daran, den Zustand immer aufzurufen oder zu verwenden, nachdem er initialisiert wurde. Im letzten Demo sollte der Zustand zum Beispiel oberhalb der Stile der Wrapper-Komponente stehen.
Viel Spaß beim React-Styling!
Das ist alles, Leute! Wir haben uns eine Handvoll verschiedener Möglichkeiten angesehen, Stile in einer React-Anwendung zu schreiben. Und es ist nicht so, dass eine besser wäre als die anderen; der Ansatz, den Sie wählen, hängt natürlich von der Situation ab. Hoffentlich haben Sie jetzt ein gutes Verständnis davon und wissen, dass Sie eine ganze Reihe von Werkzeugen in Ihrem React-Styling-Arsenal haben.
Vielen Dank.
Schöne Zusammenfassung!
Tailwind und SCSS-Module sollten ebenfalls erwähnt werden.
Tailwind ist eine Bibliothek, keine Sprache.
Es ist sinnvoll, sie nicht einzubeziehen.
Ja, man schreibt nicht wirklich CSS, wenn man Tailwind benutzt... aber wen interessiert das, benutzt Tailwind, es ist besser als all diese Lösungen lol.
Der Artikel enthält mehrere Fehler und Ungenauigkeiten, die für Anfänger zu Stolpersteinen werden.
Das Importieren von CSS oder CSS-Modulen ist keine Funktion von React und funktioniert nur, wenn Sie entweder ein Framework verwenden, das dafür konfiguriert ist, oder es selbst eingerichtet haben.
Dieser Punkt ist wichtig.
Tatsächlich ist React weder eine Programmiersprache noch ein Framework. Es ist nur eine JavaScript-Bibliothek, die beim Rendern von Live-Benutzeroberflächen (HTML) hilft. React ist nur ein winziges Zahnrad im Getriebe, und die Styling-Optionen sind ein weiteres, *separates* Zahnrad.
Das CSS-Module-Beispiel exportiert
.font, aber der JSX-Code verwendet.heading. Das ist verwirrend für jeden, der keine Vorkenntnisse über das Verhalten von CSS-Modulen hat.Styled Components sollten niemals innerhalb der Renderfunktion einer anderen Komponente definiert/konstruiert werden. (Tatsächlich sollten keine Komponenten das tun.) Dies führt zu schlechter Leistung und sehr unvorhersehbarem Rendering-Verhalten.
Hallo,
Danke für die Tipps.
Ja, ich hätte die ersten beiden von Ihnen genannten Punkte detaillierter erklären sollen.
Was die Styled Components betrifft, meine Entschuldigung, es war ein Fehler und wurde korrigiert.
danke
Gut. Ich habe Styled Components verwendet und liebe es. Die Leistung von SCSS und JavaScript, aber immer noch normale CSS-Syntax.
Es lohnt sich zu erwähnen, dass das React-Team CSS-in-JS nicht mehr empfiehlt.
https://github.com/reactwg/react-18/discussions/110
„Unsere bevorzugte Lösung ist die Verwendung von statisch extrahierten Stilen und einfachen Inline-Stilen für dynamische Werte. Z. B.
<div style={{...}}>.Sie könnten jedoch eine CSS-in-JS-Bibliothek erstellen, die statische Regeln mit einem Compiler in externe Dateien extrahiert. Das ist es, was wir bei Facebook verwenden.
Es ist verlockend, dynamisch generierte Stylesheets zu verwenden, da sie nur die Regeln enthalten, die gerade auf der Seite aktiv sind. Dies geht jedoch mit Kosten einher. Normalerweise auf Kosten der Laufzeitkosten. Es geht auch mit Kosten einher, häufig neue Regeln einzufügen, was viel von der bereits geleisteten Arbeit ungültig macht.
Gemeinsame Stylesheets sind effizient zu parsen und sehr gut zwischenspeicherbar. Indem Sie sie in gemeinsame Stile extrahieren, bündeln Sie im Wesentlichen viel von dieser Arbeit im Voraus. Dadurch vermeiden Sie, dass diese Arbeit später ausgeführt wird, wenn der Benutzer mit der Seite interagiert.
Aus Fairness als CSS-Entwickler fordere ich eine JS-in-CSS-Funktion.
Ich möchte auch eine andere Sprache zerstückeln können, die ich nicht schreiben kann.