Hallo Habr! Ich präsentiere Ihnen die Übersetzung des Artikels
„4 Wege, um Reaktionskomponenten zu stylen“ .
Bisher wurden viele Möglichkeiten zum Stylen von React-Komponenten entwickelt. Von Bibliotheken bis zur Verwendung traditioneller CSS-Dateien. Die Auswahl ist ziemlich umfangreich und wird höchstwahrscheinlich Ihren Vorlieben entsprechen. Hier sind vier Möglichkeiten, um React-Komponenten zu formatieren.
Inline-CSS
Da JSX in HTML-Elemente konvertiert wird, können Sie das style-Attribut verwenden. Stile können auf Elemente angewendet werden, indem ihnen einfach ein Objekt mit Eigenschaften übergeben wird. Es wird ungefähr so aussehen:
Diese Methode ist jedoch sehr begrenzt. Es können keine Pseudo-Selektoren wie Hover sowie Medienabfragen verwendet werden. Dies bedeutet jedoch nicht, dass es nicht verwendet werden sollte. Es kann verwendet werden, wenn nur 2 oder 3 Eigenschaften vorhanden sind, für die keine Pseudoselektoren oder Medienabfragen erforderlich sind, und / oder in Situationen, in denen die Verwendung von Bedingungen in Stilen erforderlich ist.
Styling-Bibliotheken
Ich lerne einfach gerne neue Bibliotheken oder Frameworks. Diese Methode ist meine Lieblingsmethode für das Styling von React-Komponenten. Es gibt viele Styling-Bibliotheken, mit denen Sie nicht nur Komponenten stilisieren, sondern auch zusätzliche „Super-Features“, wie ich sie nenne, sowie alle CSS-Features bereitstellen können, die die Arbeit erheblich erleichtern.
Ein Anwendungsbeispiel könnte folgendermaßen aussehen:
Das Obige ist ein Beispiel für die Verwendung der Bibliothek mit gestalteten Komponenten.
Wrapper wird als gestaltete Komponente bezeichnet. Stile werden in der Wrapper-Konstante definiert, die einfach eine Komponente mit diesen Stilen erstellt. Bestimmen Sie einfach, welche Art von Element Sie benötigen, z. B. div, header oder img, und verwenden Sie es so, als wäre es eine React-Komponente. Keine HTML-Elemente, sondern nur Komponenten, wodurch der Code sauberer und leichter zu lesen ist.
Dies ist nur meine Präferenz. Vielleicht möchten Sie ein div verwenden oder native HTML-Elemente sehen. Kein Problem! Die Khan Academy hat die Aphrodite-Bibliothek entwickelt, die HTML-Elemente verwendet, der Komponente jedoch mithilfe des Attributs className Stile hinzufügt.
Mein Artikel über AphroditeDiese Bibliotheken haben auch viele zusätzliche Funktionen, mit denen Sie großartige Dinge tun können. Es gibt viele Bibliotheken, Sie müssen also nur versuchen, herauszufinden, welche bei Ihnen bleibt.
Hier sind die beiden derzeit beliebtesten:
https://www.styled-components.com/https://glamorous.rocks/Externe Stile
Sie können Stile in eine externe CSS-Datei schreiben und bei Bedarf in die Komponente importieren. Dies war wahrscheinlich die erste Methode, die Sie gelernt haben, als Sie mit dem Lernen von React begonnen haben. Beim Hinzufügen zusätzlicher Elemente tritt jedoch ein Problem beim Benennen auf. Alle Stile sind im globalen Bereich. Sie haben beispielsweise zwei Elemente mit demselben Namen von Ihnen oder Ihrem Teamkollegen erstellt. In diesem Fall kann dieses Problem auftreten.
CSS-Module
CSS-Module sind dem Schreiben von CSS in externe Dateien sehr ähnlich. Der einzige Unterschied besteht darin, dass die Stile im Gegensatz zur herkömmlichen Verwendung externer CSS-Dateien gekapselt sind. Dies bedeutet, dass Stile nicht miteinander in Konflikt stehen oder sich gegenseitig überschreiben. Sie verwenden dieselben Methoden wie in herkömmlichem CSS. Es ermöglicht auch die Verwendung aller guten Methoden wie BEM. Hier können Sie mehr lesen:
https://github.com/css-modules/css-modulesDamit Sie sich nicht für die Verwendung von herkömmlichem CSS, CSS-Modulen, Inline-CSS, Bibliotheken für das Styling oder einer Kombination dieser Methoden entscheiden, hängt meiner Meinung nach alles von Ihren Vorlieben und den Vorlieben Ihres Teams ab.
Danke fürs Lesen. Einen Fehler gefunden? Fühlen Sie sich frei, mir von ihr zu erzählen. Einen schönen Tag noch!