Die Emotion-Bibliothek vereinfacht Ihre Verwendung von CSS in React und fügt auch einige praktische Syntaxfunktionen hinzu.

Das Gestalten einer React-Anwendung kann eine Herausforderung sein, insbesondere wenn Sie Ihre Stile organisiert und wartbar halten möchten. Um diesen Prozess zu vereinfachen, bietet die Emotion-Bibliothek eine Abstraktion auf höherer Ebene zusätzlich zu CSS.

Was ist Emotion?

Emotion ist eine Bibliothek zum Stylen von React-Anwendungen, die eine einfache und effiziente Möglichkeit bietet, Ihre Styles zu verwalten. Es ermöglicht Ihnen das Schreiben von CSS in JavaScript und bietet eine flexible API zum Gestalten Ihrer Komponenten.

Einer der Hauptvorteile der Verwendung von Emotion zum Stylen Ihrer React-Anwendung besteht darin, dass Sie Ihre Styles effizienter verwalten können. Beispielsweise können Sie identische Klassennamen in mehreren Komponenten verwenden, ohne dass es zu Namenskollisionen kommt bei der Arbeit mit CSS/SASS.

Die Emotion-Bibliothek wendet Ihre Stile nur auf die Komponenten an, die sie verwenden, und nicht auf die gesamte Seite. Dies kann Ihnen helfen, Konflikte mit anderen Stilen auf der Seite zu vermeiden und Ihren Code modularer und wiederverwendbarer zu machen.

instagram viewer

So installieren Sie Emotionen

Führen Sie den folgenden Terminalbefehl aus, um die Emotion-Bibliothek zu Ihrer React-Anwendung hinzuzufügen:

npm install --save @emotion/react

Die Emotion-Bibliothek sollte jetzt in Ihrem Projekt installiert und einsatzbereit sein, um Ihre React-Anwendung zu gestalten.

Styling mit der CSS-Prop von Emotion

Sobald Sie die Emotion-Bibliothek installiert haben, können Sie die verwenden CSS prop zum Gestalten Ihrer React-Anwendung. Der CSS prop ähnelt dem style prop, da Sie ihm Stile in Form von Strings oder regulären JavaScript-Objekten übergeben können.

Um Ihre Anwendung mit dem zu gestalten CSS prop, müssen Sie es aus der importieren @Emotion/Reaktion Bibliothek, und definieren Sie dann Ihre Stile:

/** @jsxImportSource @Emotion/reagieren */
importieren Reagieren aus'reagieren';
importieren {css} aus'@Emotion/Reaktion';
FunktionApp() {
zurückkehren (
 Polsterung: 0.5Rest 1rem;
 Grenze: keine;
 Schriftfamilie: kursiv;
 Grenzradius: 12Pixel;
 Farbe: #333333;
 Hintergrundfarbe: erben;
 Margin-Block-Start: 2rem;
 Randblock-Ende: 2rem;
`}>
 Klick mich
 </button>
 )
}


ExportStandard Anwendung;

Die erste Codezeile, /** @jsxImportSource @emotion/reagieren */, ist ein bestimmter Kommentar, den Sie der JSX-Datei hinzufügen sollten, um anzugeben, dass die Emotion-Bibliothek als JSX-Pragma für diese Datei verwendet werden soll.

In JSX ist ein Pragma eine Funktion, die die JSX-Syntax in normales JavaScript umwandelt. Standardmäßig verwendet React die React.createElement Funktion als JSX-Pragma. Allerdings mit der @jsxImportSource Kommentar können Sie ein anderes Pragma angeben.

In diesem Fall ist die @Emotion/Reaktion pragma weist JSX an, die zu verwenden jsx Funktion aus der Emotion-Bibliothek, um den JSX-Code umzuwandeln. Indem Sie den Pragma-Kommentar zu einer JSX-Datei hinzufügen, können Sie die CSS-in-JS-Funktionen der Emotion-Bibliothek in Ihren Komponenten verwenden.

Die Schaltflächenkomponente rendert eine Schaltfläche mit einem benutzerdefinierten Stil. Hier das CSS prop fügt dem Schaltflächenelement das benutzerdefinierte Styling hinzu.

Der CSS prop unterstützt auch verschachteltes Styling. Mit verschachtelten Stilen können Sie Stile schreiben, die ineinander verschachtelt sind.

Zum Beispiel:

/** @jsxImportSource @Emotion/reagieren */
importieren Reagieren aus'reagieren';
importieren {css} aus'@Emotion/Reaktion';
FunktionApp() {
zurückkehren (
 Polsterung: 0.5Rest 1rem;
 Grenze: keine;
 Schriftfamilie: kursiv;
 Grenzradius: 12Pixel;
 Farbe: #333333;
 Hintergrundfarbe: erben;
 Margin-Block-Start: 2rem;
 Randblock-Ende: 2rem;


 &:schweben{
 Farbe: #e2e2e2;
 Hintergrundfarbe: #333333;
 }
`}>
 Klick mich
 </button>
 )
}
ExportStandard Anwendung;

In diesem Beispiel verwendet die Deklaration des Hover-Stils die verschachtelte Stilfunktion der CSS Stütze. Die Hintergrund- und Schriftfarbe im obigen Codeblock ändert sich, wenn Sie mit der Maus über die Schaltfläche fahren.

Übergeben von Objektstilen an die CSS-Prop

Der CSS prop akzeptiert auch reguläre JavaScript-Objektstile. Wenn Sie mehrere Komponenten gestalten, können Sie durch die Verwendung von Objektstilen Stile in Ihren Komponenten wiederverwenden.

Um Objektstile an die zu übergeben CSS prop, definieren Sie die Stile als JavaScript-Objekt und übergeben Sie es an die prop:

konst Stil = {
 Polsterung: '0.5rem 1rem',
 Grenze: 'keiner',
 Schriftfamilie: 'kursiv',
 RandRadius: '12px',
 Farbe: '#333333',
 Hintergrundfarbe: 'erben',
 RandBlockStart: '2rem',
 marginBlockEnde: '2rem',
'&:schweben': {
 Farbe: '#e2e2e2',
 Hintergrundfarbe: '#333333',
 }
}
zurückkehren (
"App">

Beachten Sie, dass die CSS-Eigenschaftsnamen camelCased statt getrennt sind. Dies liegt daran, dass die Stile als JavaScript-Objekte definiert sind, die camelCase-Namenskonventionen verwenden.

Styling mit den Styled Components

Die Emotion-Bibliothek verwendet auch gestylte Komponenten beim Stylen von React-Anwendungen. Verwenden von gestylten Komponenten ähnelt React-Komponenten, abgesehen davon, dass sie Stile enthalten, die sofort einsatzbereit sind. Um gestylte Komponenten zu erstellen, verwenden Sie die gestylt Funktion.

Der gestylt Mit der Funktion können Sie wiederverwendbare gestylte Komponenten erstellen. Um die zu verwenden gestylt Funktion, importieren Sie sie aus der Emotion / gestylt Bibliothek.

Um das zu bekommen @emotion/gestylt Bibliothek in Ihrer Anwendung installieren, installieren Sie sie in Ihrem Projekt. Sie können dies tun, indem Sie den folgenden Befehl im Terminal Ihres Projekts ausführen:

npm installiere @emotion/styled

Nach der Installation der @emotion/gestylt Bibliothek, importieren Sie die gestylt Funktion und definieren Sie Ihre Stile:

importieren gestylt aus"@emotion/gestylt";
konst Button = styled.button({
 Polsterung: '0.5rem 1rem',
 Grenze: 'keiner',
 Schriftfamilie: 'kursiv',
 RandRadius: '12px',
 Farbe: '#333333',
 Hintergrundfarbe: 'erben',
 RandBlockStart: '2rem',
 marginBlockEnde: '2rem',


'&:schweben': {
 Farbe: '#e2e2e2',
 Hintergrundfarbe: '#333333',
 }
})
ExportStandard Taste;

Im obigen Codeblock eine formatierte Komponente Taste geschaffen. Sie können diesen Button in Ihrer React-Anwendung wie jede andere React-Komponente verwenden.

So:

importieren Reagieren aus'reagieren';
importieren Taste aus'./Taste';
FunktionApp() {
zurückkehren (








ExportStandard Anwendung;

Rendern der App -Komponente zeigt eine Schaltfläche mit den in der definierten Stilen an Taste Komponente auf Ihrem Bildschirm.

Der gestylt Die Funktion akzeptiert auch Zeichenfolgenstile. Es sieht anders aus als der Objektstil-Ansatz, funktioniert aber ähnlich.

importieren gestylt aus"@emotion/gestylt";
konst Button = styled.button`
 Polsterung: 0.5Rest 1rem;
 Grenze: keine;
 Schriftfamilie: kursiv;
 Grenzradius: 12Pixel;
 Farbe: #333333;
 Hintergrundfarbe: erben;
 Margin-Block-Start: 2rem;
 Randblock-Ende: 2rem;


 &:schweben {
 Farbe: #e2e2e2;
 Hintergrundfarbe: #333333;
 }
`
ExportStandard Taste;

Effizientes Styling mit Emotion

Emotion ist eine leistungsstarke Bibliothek zum Stylen von React-Komponenten, die eine einfache und effiziente Möglichkeit bietet, Ihre Styles zu verwalten. Egal, ob Sie Anfänger oder erfahrener Entwickler sind, Emotion kann Ihnen dabei helfen, den Prozess des Stylings Ihrer React-Anwendung zu vereinfachen und die Wartung und Skalierung Ihres Codes zu vereinfachen.

Wenn Sie also nach einer effizienteren und flexibleren Möglichkeit suchen, Ihre React-Komponenten zu stylen, ziehen Sie Emotion in Betracht.