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!