Gestalten einer React-Anwendung mit Stichen

Stitches ist eine moderne CSS-in-JS-Bibliothek, die eine leistungsstarke und flexible Möglichkeit zur Gestaltung Ihrer React-Anwendungen bietet. Es bietet einen einzigartigen Stilansatz, der die besten Teile von CSS und JavaScript kombiniert, sodass Sie ganz einfach dynamische Stile erstellen können.

Stiche einrichten

Gestalten Sie Ihre React-Anwendung mit Stiche ist ähnlich wie Verwenden der Styled-Components-Bibliothek. Wenn man bedenkt, dass Stiche und gestylte Komponenten sind beides CSS-in-JS-Bibliotheken, mit denen Sie Stile in JavaScript schreiben können.

Bevor Sie Ihre React-Anwendung gestalten, müssen Sie die Stichbibliothek installieren und einrichten. Um die Bibliothek mit npm zu installieren, führen Sie den folgenden Befehl in Ihrem Terminal aus:

npm install @stitches/react

Alternativ können Sie die Bibliothek mit Garn mit diesem Befehl installieren:

yarn add @stitches/react

Sobald Sie die Stichbibliothek installiert haben, können Sie mit der Gestaltung Ihrer React-Anwendung beginnen.

Gestaltete Komponenten erstellen

Um gestaltete Komponenten zu erstellen, bietet die Stichbibliothek eine gestylt Funktion. Mit der Funktion „styled“ können Sie gestaltete Komponenten erstellen, die CSS-Stile und die Logik von Komponenten kombinieren.

Der gestylt Die Funktion benötigt zwei Argumente. Das erste ist ein HTML/JSX-Element und das zweite ist ein Objekt, das die CSS-Eigenschaften für die Formatierung enthält.

So können Sie mit dem eine gestaltete Schaltflächenkomponente erstellen gestylt Funktion:

import { styled } from"@stitches/react";
exportconst Button = styled("button", {
 padding: "0.7rem 0.8rem",
 borderRadius: "12px",
 backgroundColor: "#333333",
 color: "#e2e2e2",
 fontFamily: "cursive",
 border: "none",
});

Der obige Codeblock erstellt eine Taste Komponente mit dunkler Hintergrundfarbe, grauer Textfarbe, einem Randradius und etwas Polsterung. Beachten Sie, dass Sie die CSS-Eigenschaften in CamelCase und nicht in Kebab-Case schreiben. Dies liegt daran, dass CamelCase eine häufigere Methode zum Schreiben von CSS-Eigenschaften in JavaScript ist.

Sobald Sie die gestaltete Schaltflächenkomponente erstellt haben, können Sie sie in Ihre React-Komponenten importieren und verwenden.

Zum Beispiel:

import React from"react";
import { Button } from"./Button";
functionApp() {
return (
 <>
Click Me</Button>
 </>
 );
}
exportdefault App;

In diesem Beispiel wird die verwendet Taste Komponente in einem App Komponente. Die Schaltfläche übernimmt die Stile, die Sie an übergeben haben gestylt Funktion, so dass es so aussieht:

Der gestylt Mit der Funktion können Sie auch CSS-Stile verschachteln, mit einer ähnlichen Syntax wie die SASS/SCSS-Erweiterungssprache. Dies erleichtert Ihnen die Organisation Ihrer Stile und macht Ihren Code lesbarer.

Hier ist ein Beispiel für die Verwendung der Technik der verschachtelten Stile:

import { styled } from"@stitches/react";
exportconst Button = styled("button", {
 padding: "0.7rem 0.8rem",
 borderRadius: "12px",
 backgroundColor: "#333333",
 color: "#e2e2e2",
 fontFamily: "cursive",
 border: "none",
"&:hover": {
 backgroundColor: "#e2e2e2",
 color: "#333333",
 },
});

Dieser Code verwendet verschachtelte CSS-Stile und eine Pseudoklasse als Ziel Taste Komponente. Wenn Sie mit der Maus über die Schaltfläche fahren, wird der verschachtelte Selektor angezeigt &:schweben Ändert die Hintergrund- und Textfarben der Schaltfläche.

Styling mit der CSS-Funktion

Wenn es Ihnen unangenehm ist, gestaltete Komponenten zu erstellen, können Sie Folgendes tun: Stiche Bibliothek bietet die CSS Funktion, die Klassennamen generieren kann, um Ihre Komponenten zu formatieren. Der CSS Die Funktion akzeptiert ein JavaScript-Objekt mit CSS-Eigenschaften als einziges Argument.

So können Sie Ihre Komponenten mit dem stylen CSS Funktion:

import React from"react";
import { css } from"@stitches/react";
const buttonStyle = css({
 padding: "0.7rem 0.8rem",
 borderRadius: "12px",
 backgroundColor: "#333333",
 color: "#e2e2e2",
 fontFamily: "cursive",
 border: "none",
"&:hover": {
 backgroundColor: "#e2e2e2",
 color: "#333333",
 },
});
functionApp() {
return (
 <>
Click Me</button>
 </>
 );
}
exportdefault App;

Der CSS Die Funktion erstellt die CSS-Stile für die Schaltfläche, die dieser Code dann der zuweist buttonStyle Variable. Der buttonStyle Die Funktion generiert einen Klassennamen für die definierten Stile, der dann an übergeben wird Klassenname Stütze des Taste Komponente.

Globale Stile erstellen

Verwendung der Stiche Mit der Bibliothek können Sie auch globale Stile für Ihre Anwendung definieren globalCss Funktion. Die Funktion globalCss erstellt und wendet globale Stile auf Ihre React-Anwendung an.

Nachdem Sie Ihre globalen Stile mit definiert haben globalCSS, rufen Sie die Funktion in Ihrem auf App Komponente, um die Stile auf Ihre Anwendung anzuwenden.

Zum Beispiel:

import React from"react";
import { globalCss } from"@stitches/react";
const globalStyles = globalCss({
 body: { backgroundColor: "#f2f2f2", color: "#333333" },
});
functionApp() {
 globalStyles();
return<>;
}
exportdefault App;

In diesem Beispiel werden die Stile für die definiert Körper Element mit dem globalCss Funktion. Der Aufruf setzt die Hintergrundfarbe auf #f2f2f2 und die Textfarbe zu #333333.

Dynamische Stile erstellen

Eine der leistungsstärkeren Funktionen des Stiche Bibliothek ist ihre Fähigkeit, dynamische Stile zu erstellen. Sie können Stile erstellen, die davon abhängen Reagieren Sie auf Requisiten mit dem Varianten Schlüssel. Der Varianten key ist eine Eigenschaft von beiden CSS Und gestylt Funktionen. Sie können beliebig viele Varianten Ihres Bauteils erstellen.

Zum Beispiel:

import { styled } from"@stitches/react";
exportconst Button = styled("button", {
 padding: "0.7rem 0.8rem",
 borderRadius: "12px",
 fontFamily: "cursive",
 border: "none",
 variants: {
 color: {
 black: {
 backgroundColor: "#333333",
 color: "#e2e2e2",
"&:hover": {
 backgroundColor: "#e2e2e2",
 color: "#333333",
 },
 },
 gray: {
 backgroundColor: "#e2e2e2",
 color: "#333333",
"&:hover": {
 backgroundColor: "#333333",
 color: "#e2e2e2",
 },
 },
 },
 },
});

Dieser Code erstellt eine Taste Komponente mit a Farbe Variante. Der Farbe Mit der Variante können Sie die Farbe der Schaltfläche basierend auf a ändern Farbe Stütze. Sobald Sie die erstellt haben Taste Komponente, Sie können sie in Ihrer Anwendung verwenden.

Zum Beispiel:

import React from"react";
import { Button } from"./Button";
functionApp() {
return (
 <>
"gray">Click Me</Button>
"black">Click Me</Button>
 </>
 );
}
exportdefault App;

Sobald Sie diese Anwendung rendern, werden auf Ihrer Benutzeroberfläche zwei Schaltflächen angezeigt. Die Schaltflächen sehen wie im Bild unten aus.

Erstellen von Thementokens

Der Stiche Mit der Bibliothek können Sie eine Reihe von Design-Tokens erstellen, die die visuellen Aspekte Ihrer Benutzeroberfläche definieren, z. B. Farben, Typografie, Abstände und mehr. Diese Token tragen dazu bei, die Konsistenz aufrechtzuerhalten und die Aktualisierung der gesamten Stile Ihrer Anwendung einfacher zu gestalten.

Um diese Thementoken zu erstellen, verwenden Sie die createStitches Funktion. Der createStitches Mit der Funktion „Stichbibliothek“ können Sie die Bibliothek konfigurieren. Stellen Sie sicher, dass Sie das verwenden createStitches Funktion in a Stiche.config.ts Datei oder eine Stitches.config.js Datei.

Hier ist ein Beispiel für die Erstellung eines Theme-Tokens:

import { createStitches } from"@stitches/react";
exportconst { styled, css } = createStitches({
 theme: {
 colors: {
 gray: "#e2e2e2",
 black: "#333333",
 },
 space: {
1: "5px",
2: "10px",
3: "15px",
 },
 fontSizes: {
1: "12px",
2: "13px",
3: "15px",
 },
 },
});

Nachdem Sie nun Ihre Design-Tokens definiert haben, können Sie sie in Ihren Komponentenstilen verwenden.

import { styled } from"../stitches.config.js";
exportconst Button = styled("button", {
 padding: "$1 $3",
 borderRadius: "12px",
 fontSize: "$1",
 border: "none",
 color: '$black',
 backgroundColor: '$gray',
});

Der obige Codeblock verwendet die Farbtoken $grau Und $schwarz für die Hintergrund- und Textfarbe der Schaltfläche. Es werden auch die Space-Tokens verwendet $1 Und $3 um den Abstand der Schaltfläche und die Schriftgrößenvariable festzulegen $1 um die Schriftgröße der Schaltfläche festzulegen.

Effizientes Styling mit Stichen

Die Stichbibliothek bietet eine leistungsstarke und flexible Möglichkeit, Ihre React-Anwendungen zu gestalten. Mit Funktionen wie gestalteten Komponenten, dynamischen Stilen und globalCSS können Sie problemlos komplexe Designs erstellen. Unabhängig davon, ob Sie eine kleine oder große React-Anwendung erstellen, können Stiche eine ausgezeichnete Wahl für das Styling sein.

Eine tolle Alternative zur Stichbibliothek ist die Emotionsbibliothek. Emotion ist eine beliebte CSS-in-JS-Bibliothek, mit der Sie Stile in JavaScript schreiben können. Es ist einfach zu bedienen und bietet viele Funktionen zum Erstellen großartiger Stile für Ihre Anwendung.