Wir alle wissen, wie man ein Stylesheet mit einem HTML verlinkt , aber das Styling in einer React Ein-Seiten-Anwendung (SPA) bietet mehr Optionen. Erforschen wir die verschiedenen Ansätze für CSS bei React und unterstreichen ihre Stärken und Schwächen.
Diese Methode spiegelt traditionelle CSS -Verknüpfungen wider.
style.css
).import "./style.css";
Beispiel:
Import reagieren aus "reagieren"; Import "./Components/css/app.css"; Funktion App () { zurückkehren ( <div classname="main"></div> ); } Standard -Standard -App exportieren;
Dies importiert App.css
aus dem Ordner /Components/css
.
Obwohl im Allgemeinen für große Projekte aufgrund von Wartbarkeitsbedenken entmutigt werden, können Inline -Stile in bestimmten Kontexten praktisch sein. Die Komponentenstruktur von React mindert einige Probleme mit der Startbarkeit.
Ein einfaches Beispiel:
<div classname="main" style="{{" color:></div>
Ein organisierterer Ansatz verwendet Stilobjekte:
Import reagieren aus "reagieren"; Funktion App () { const styles = { hauptsächlich: { BackgroundColor: "#f1f1f1", Breite: "100%", }, inputText: { Polsterung: "10px", Farbe: "Rot", }, }; zurückkehren ( <div classname="main" style="{styles.main}"></div> ); } Standard -Standard -App exportieren;
Dies gilt im styles
-Objekt definierte Stile. Beachten Sie die Verwendung von lockigen Klammern für die Objektreferenzierung.
CSS -Module bieten lokal Scoped -Klassennamen an und verhindern, dass Namenskonflikte in größeren Anwendungen benannt werden. Jede Komponente erhält ihre eigenen eindeutigen Klassennamen.
.module.css
-Datei (z. B. styles.module.css
).className
:/ * styles.module.css */ .Font { Farbe: #f00; Schriftgröße: 20px; }
Import reagieren aus "reagieren"; Importstile von "./styles.module.css"; Funktion App () { zurückkehren ( <h1 classname="{styles.font}">Hallo Welt</h1> ); } Standard -Standard -App exportieren;
Styled-Komponenten bieten eine Möglichkeit, tatsächliche CSS in Ihrem JavaScript zu schreiben und gestaltete React-Komponenten zu erstellen. Zu den Vorteilen gehören eindeutige Klassennamen, dynamisches Styling und eine bessere CSS -Organisation.
Installation: npm install styled-components
Import: import styled from 'styled-components';
Beispiel:
Import reagieren aus "reagieren"; Import gestylt von "gestylerischen Komponenten"; const wrapper = styled.div` Breite: 100%; Höhe: 100px; Hintergrundfarbe: Rot; Anzeige: Block; `; Funktion App () { zurückkehren<wrapper></wrapper> ; } Standard -Standard -App exportieren;
Gestaltete Komponenten ermöglichen ein bedingtes Styling unter Verwendung von Requisiten innerhalb des CSS, wodurch dynamische Stiländerungen basierend auf Komponentenzustand oder Requisiten ermöglichen. In diesem Beispiel wird ein ternärer Operator für das bedingte Styling verwendet:
(Beispielcode, das das bedingte Styling für Kürze ausgelassen hat, aber das Konzept wird erklärt.)
React bietet verschiedene CSS -Styling -Optionen. Der beste Ansatz hängt von Projektgröße, Komplexität und persönlicher Präferenz ab. Dieser Überblick bietet eine solide Grundlage für die Auswahl der richtigen Methode für Ihre React -Projekte.
Das obige ist der detaillierte Inhalt vonVerschiedene Möglichkeiten, CSS in React zu schreiben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!