So stylen Sie React-Komponenten mit CSS

Sie können Ihre React-Apps und -Seiten mit einer Reihe von Techniken gestalten. Am einfachsten wäre es, eine React-Komponentenbibliothek herunterzuladen. Aber auch wenn Sie Bibliotheken verwenden, müssen Sie früher oder später benutzerdefinierte Stile hinzufügen. Also, was ist der beste Weg, es zu tun?

Bei kleinen Projekten können Sie Ihre App bequem mit Inline-Stilen oder Modulen gestalten oder selbst className- Spezifikationen schreiben. Und für dynamische Projekte – wie Apps – ist es besser, eine Bibliothek zu verwenden, mit der Sie Requisiten einfach implementieren können.

Alternativ können Sie ein Utility-Kit wie Tailwind UI verwenden, das mit vorgefertigten Stilen geliefert wird. Wenn Sie ein Modell oder eine Präsentation rendern müssen, sind React-freundliche UI-Kits der richtige Weg.

Praktisches Styling mit className

In React werden praktische CSS-Stile über die Eigenschaft className angewendet.

Dies entspricht auch der Verwendung eines Stylesheets für Ihr Projekt. Da React von der Komponentenstruktur gesteuert wird, können Sie Ihre Stylesheets nur für bestimmte Anforderungen importieren.

Schauen wir uns ein Beispiel an.

App.css

 .CSS-span { display: inline-block; transform: rotate(-1deg); position: relative; color: #fff; background-color: #dd9662; padding: 1px 5px 1px 5px; border-radius: 5px; }

App.js

 import './app.css'; function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> How to Style React Components with <span className="CSS-span">CSS</span> </p> </header> </div> ); }

Und das wäre das Ergebnis:

Es ist eine völlig gültige Vanilla-Technik. Und wird am häufigsten verwendet, um globale Variablen zu deklarieren, die Sie in Kernkomponenten wiederverwenden werden.

Der einzige Vorbehalt ist, dass mit dem Wachstum Ihres Projekts auch das Potenzial für Namenskonflikte wächst.

Ebenso sind die Effizienzkosten für die Verwaltung von Hunderten von Stylesheets absurd hoch.

Verwenden von JSX für Inline-Stile

Mit React können Sie DOM-Elemente mit Inline-Stilen gestalten. Während die CSS-Logik dieselbe bleibt, muss der Stil selbst JavaScript passieren. Dies wird auch als JSX bezeichnet.

Schauen wir uns ein Beispiel an:

Überschrift.js

 function Headline(){ const headlineStyle = { backgroundColor: "#fff", lineHeight: "1.5", height: "2rem", border: "none", color: "black" } return ( <div style= { headlineStyle } > <h2>Headline title</h2> <p>the sub-headline</p> </div> ) }

Eine Sache, die Sie bemerken werden, ist, dass wir lineHeight verwenden, anstatt line-height zu schreiben.

Die Erklärung dafür lautet: „Da JSX näher an JavaScript als an HTML ist, verwendet React DOM die Namenskonvention für camelCase Eigenschaften anstelle von HTML-Attributnamen.“ .

Inline-Stile werden normalerweise verwendet, um Beispiele zu präsentieren, aber auch um bestimmten Elementen dynamische Stile hinzuzufügen. Darüber hinaus unterstützen Inline-Stile keine Pseudoelemente oder Medienabfragen, da Sie nur style übergeben können. Die Verwendung eines Stylesheets ist eine bessere Alternative.

Lokalen Geltungsbereich mit CSS-Modulen erstellen

Wenn Sie benutzerdefinierte Stile ohne Namenskonflikte auf Komponenten anwenden möchten, können Sie dies über CSS-Module tun.

Dies ist ein Ansatz, bei dem Sie den lokalen Geltungsbereich auf jede Komponente einzeln anwenden können.

So:

Header.module.css

 .container { width: 1280px; margin: 1rem auto; padding: 1rem; } .header { background-color: #ffffff; color: #000000; font-weight: 700; }

Header.js

 import styles from './Header.module.css'; function Header() { return ( <div className={styles.container}> <h2 className={styles.header}>Using CSS Modules in React</h2> </div> ); }

Sie können auch Dinge wie Komposition tun, bei der Sie einen bestimmten Stil aus einem anderen Stylesheet aufrufen – ohne die Notwendigkeit, dieselbe Logik zweimal neu zu schreiben.

 .header { composes: header from './style.css'; }

CSS in JS

Im Gegensatz zu Frameworks wie Vue und Svelte bietet React keine eigene Styling-Oberfläche.

Während Sie CSS für Komponenten mit den oben genannten Methoden schreiben können, besteht der heilige Gral-Ansatz darin, CSS in JS-Bibliotheken zu verwenden. Jede Bibliothek hat ihre Stärken und Schwächen, aber im Allgemeinen bleiben die Vorteile gleich:

• Requisiten für verschiedene Stilvariationen.
• Zugängliche Thematisierung.
• Komponentenbasiertes Style Scoping.
• Dynamische CSS-Variablen mit JavaScript-Funktionen.

Die beliebteste Lösung für CSS in JS sind Styled Components.

Und andere bemerkenswerte Optionen sind Emotion und Linaria. Schauen wir uns für die Demo an, wie CSS mithilfe der Styled Components-Bibliothek in eine React-Komponente integriert wird.

StyledComponents.js

 import styled from 'styled-components'; const HeaderWrapper = styled.section` padding: 4em; background: orange; `; const HeaderTitle = styled.h2` font-size: 2rem; text-align: center; color: black; `; <HeaderWrapper> <HeaderTitle>Example of creating a React component with Styled Components.</HeaderTitle> </HeaderWrapper>

Zuerst erstellen wir eine neue Komponente namens HeaderWrapper , die einen <section> -Container für unseren Header-Titel rendert. Dann erstellen wir eine weitere Komponente namens HeaderTitle und übergeben ihr die CSS-Variablen. In gewisser Weise ist dies also genau dasselbe wie die Arbeit mit Webkomponenten, nur im Kontext von React.

Verwendung eines CSS-Frameworks

Es ist nicht so, dass sich alles im Front-End in Richtung Frameworks und Bibliotheken bewegt.

Es hat eher damit zu tun, dass es ineffizient ist, ein Projekt aus dem Nichts zu starten. Ein Framework wie Tailwind CSS hilft, die Notwendigkeit zu verringern, alle Ihre Anwendungsstrukturen von Grund auf neu zu schreiben. Die Funktionsweise von Tailwind CSS besteht darin, dass das Framework vordefinierte Utility-Klassen bereitstellt, mit denen Sie ein Layout strukturieren können, ohne unabhängiges CSS schreiben zu müssen.

TailwindCSSApp.js

 function Header() { return ( <div className="container mx-auto bg-gray-500 rounded-xl shadow border p-8 m-10"> <p className="text-3xl text-black-700 font-bold mb-5"> Tailwind CSS with React </p> <p className="text-black-300 text-lg"> All styling defined with utility classes </p> </div> ); } export default Header;

Anstatt also den Komponentenstil mit Constants zu definieren, können wir den Stil direkt schreiben, wie vom Framework vorgegeben. Eine Methode wie diese ist äußerst effizient, und Sie können beispielsweise – von anderen erstellte UI-Komponenten (z. B. Karten) importieren.

Tailwind CSS ist besonders beliebt, da Sie Snippets direkt kopieren und einfügen und ohne Konsequenzen in Ihrem App-Design verwenden können.

Verwenden einer UI-Bibliothek

Die letzte Methode zum Gestalten von React-Komponenten ist die Verwendung einer UI-Bibliothek. Im Gegensatz zu einem Framework folgt eine UI-Bibliothek Stilrichtlinien. Es kommt also in vielerlei Hinsicht mit einem Stil, der bereits vorbestimmt ist. Solche wie Mantine und Material UI sind einige der wichtigsten Optionen.

Der einzige „Nachteil“ ist, dass Sie ziemlich viel Zeit damit verbringen müssen, diese bestimmte Bibliothek zu lernen. Das Gleiche gilt jedoch für Frameworks. Trotz der Eintrittsbarriere sind sowohl CSS-Frameworks als auch UI-Bibliotheken der Goldstandard beim Styling von React-Komponenten.