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";

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 .

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>

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

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;
}

 Import reagieren aus "reagieren";
Importstile von "./styles.module.css";

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

Standard -Standard -App exportieren;

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;

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!