Verschiedene Möglichkeiten, CSS in React PlatoBlockchain Data Intelligence zu schreiben. Vertikale Suche. Ai.

Verschiedene Möglichkeiten, CSS in React zu schreiben

Zeitstempel: 22. Juni 2022, 10:24 Uhr

Wir sind alle mit der Standardmethode von vertraut Verknüpfen eines Stylesheets zu den <head> eines HTML-Dokuments, richtig? Das ist nur eine von mehreren Möglichkeiten, CSS zu schreiben. Aber wie sieht es aus, Dinge in einer Single-Page-Anwendung (SPA) zu stylen, sagen wir in einem React-Projekt?

Es stellt sich heraus, dass es mehrere Möglichkeiten gibt, eine React-Anwendung zu gestalten. Einige überschneiden sich mit traditionellem Styling, andere nicht so sehr. Aber zählen wir alle Möglichkeiten, wie wir es tun können.

Importieren externer Stylesheets

Wie der Name schon sagt, kann React CSS-Dateien importieren. Der Vorgang ähnelt dem, wie wir CSS-Dateien im HTML-Code verknüpfen <head>:

  1. Erstellen Sie eine neue CSS-Datei in Ihrem Projektverzeichnis.
  2. Schreiben Sie CSS.
  3. Importiere es in die React-Datei.

Liken:

import "./style.css";

Das steht normalerweise oben in der Datei, wo andere Importe 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 importiert App.js von dem /Components/css -Ordner.

Schreiben Sie Inline-Stile

Sie sind vielleicht daran gewöhnt zu hören, dass Inline-Styling nicht so gut für die Wartbarkeit und so weiter ist, aber es gibt definitiv Situationen (hier ist eine!) wo es Sinn macht. Und die Wartbarkeit ist in React weniger ein Problem, da das CSS oft sowieso schon in derselben Datei sitzt.

Dies ist ein supereinfaches Beispiel für Inline-Styling in React:

<div className="main" style={{color:"red"}}>

Ein besserer Ansatz ist jedoch die Verwendung von Objekten:

  1. Erstellen Sie zunächst ein Objekt, das Stile für verschiedene Elemente enthält.
  2. Fügen Sie es dann mithilfe von einem Element hinzu style -Attribut und wählen Sie dann die zu formatierende Eigenschaft aus.

Sehen wir das mal im Kontext:

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 eine styles Objekt, das zwei weitere Objekte enthält, eines für die .main -Klasse und die andere für eine Texteingabe, die Stilregeln enthalten, die denen ähneln, die wir in einem externen Stylesheet erwarten würden. Diese Objekte werden dann auf die angewendet style Attribut von Elementen, die im zurückgegebenen Markup enthalten sind.

Beachten Sie, dass geschweifte Klammern verwendet werden, wenn auf Stile verwiesen wird, und nicht die Anführungszeichen, die wir normalerweise in einfachem HTML verwenden würden.

Verwenden Sie CSS-Module

CSS-Module… was zum Teufel ist mit denen passiert, oder? Sie haben den Vorteil von Variablen mit lokalem Geltungsbereich und können direkt neben React verwendet werden. Aber was sind sie noch einmal genau?

Zitieren der Repo-Dokumentation:

CSS-Module funktionieren, 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 injiziert oder verkettet und zur Verwendung in der Produktion in eine Datei geschrieben werden kann. Die Daten werden verwendet, um die menschenlesbaren Namen, die Sie in den Dateien verwendet haben, dem global sicheren Ausgabe-CSS zuzuordnen.

Einfacher ausgedrückt, CSS-Module ermöglichen es uns, denselben Klassennamen in mehreren Dateien ohne Konflikte zu verwenden, da jeder Klassenname einen eindeutigen programmatischen Namen erhält. Dies ist besonders bei größeren Anwendungen nützlich. Jeder Klassenname ist lokal auf die spezifische Komponente beschränkt, in die er importiert wird.

Ein CSS-Modul-Stylesheet ähnelt einem normalen Stylesheet, nur mit einer anderen Erweiterung (z styles.module.css). So werden sie eingerichtet:

  1. Erstellen Sie eine Datei mit .module.css als Erweiterung.
  2. Importiere dieses Modul in die React-App (wie wir zuvor gesehen haben)
  3. Hinzufügen className zu einem Element oder einer Komponente und referenzieren Sie den bestimmten 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;

Verwenden Sie Stilkomponenten

Hast du benutzt gestylte Komponenten? Es ist sehr beliebt und ermöglicht es Ihnen, benutzerdefinierte Komponenten mit echtem CSS in Ihrem JavaScript zu erstellen. Eine gestylte Komponente ist im Grunde eine React-Komponente mit – machen Sie sich bereit – Stilen. Einige der Funktionen umfassen eindeutige Klassennamen, dynamisches Styling und eine bessere Verwaltung des CSS, da jede Komponente ihre eigenen separaten Stile hat.

Installieren Sie das npm-Paket styled-components in der Befehlszeile:

npm install styled-components

Als nächstes importierst du es in die React-App:

import styled from 'styled-components'

Erstellen Sie eine Komponente und weisen Sie ihr eine Stileigenschaft zu. Beachten Sie die Verwendung von Vorlagenliteralen, die in der durch Backticks gekennzeichnet sind Wrapper Objekt:

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 Die 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, da Sie Requisiten innerhalb des CSS verwenden können. Dies öffnet die Tür für bedingte Anweisungen und das Ändern von Stilen basierend auf einem Status oder einer Requisite.

Hier ist eine Demo, die das zeigt:

Hier manipulieren wir die divs display Eigenschaft auf den Anzeigezustand. Dieser Zustand wird durch eine Schaltfläche gesteuert, die den Zustand des div umschaltet, wenn darauf geklickt wird. Dies wiederum schaltet zwischen den Stilen von zwei verschiedenen Zuständen um.

Inline if Anweisungen verwenden wir a ? statt des üblichen if/else Syntax. Die else Teil steht nach dem Semikolon. Und denken Sie daran, den Zustand immer aufzurufen oder zu verwenden, nachdem er initialisiert wurde. In dieser letzten Demo sollte beispielsweise der Zustand über dem sein Wrapper Stile der Komponente.

Viel Spaß beim React-Styling!

Das ist ein Wrap, Leute! Wir haben uns eine Handvoll verschiedener Möglichkeiten zum Schreiben von Stilen in einer React-Anwendung angesehen. Und es ist nicht so, dass einer besser ist als der Rest; Welche Vorgehensweise Sie verwenden, hängt natürlich von der Situation ab. Hoffentlich haben Sie sie jetzt gut verstanden und wissen, dass Sie eine Reihe von Tools in Ihrem React-Styling-Arsenal haben.

Zeitstempel:

Mehr von CSS-Tricks