Heim > Web-Frontend > CSS-Tutorial > Verschiedene Möglichkeiten, CSS in React zu schreiben

Verschiedene Möglichkeiten, CSS in React zu schreiben

William Shakespeare
Freigeben: 2025-03-13 10:44:09
Original
263 Leute haben es durchsucht

Verschiedene Möglichkeiten, CSS in React zu schreiben

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.

Importieren externer Stylesheets

Diese Methode spiegelt traditionelle CSS -Verknüpfungen wider.

  1. Erstellen Sie eine CSS -Datei (z. B. style.css ).
  2. Schreiben Sie Ihre CSS -Regeln.
  3. Importieren Sie es in Ihre React -Komponente:
 import "./style.css";
Nach dem Login kopieren

Beispiel:

 Import reagieren aus "reagieren";
Import "./Components/css/app.css";

Funktion App () {
  zurückkehren (
    <div classname="main"></div>
  );
}

Standard -Standard -App exportieren;
Nach dem Login kopieren

Dies importiert App.css aus dem Ordner /Components/css .

Inline -Stile

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>
Nach dem Login kopieren

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;
Nach dem Login kopieren

Dies gilt im styles -Objekt definierte Stile. Beachten Sie die Verwendung von lockigen Klammern für die Objektreferenzierung.

CSS -Module

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.

  1. Erstellen Sie eine .module.css -Datei (z. B. styles.module.css ).
  2. Importieren Sie es in Ihre React -Komponente.
  3. Verwenden Sie die importierten Stile mit className :
 / * styles.module.css */
.Font {
  Farbe: #f00;
  Schriftgröße: 20px;
}
Nach dem Login kopieren
 Import reagieren aus "reagieren";
Importstile von "./styles.module.css";

Funktion App () {
  zurückkehren (
    <h1 classname="{styles.font}">Hallo Welt</h1>
  );
}

Standard -Standard -App exportieren;
Nach dem Login kopieren

Stilkomponenten

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;
Nach dem Login kopieren

Bedingte Styling

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.)

Abschluss

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!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage