Styla en React-applikation med stygn

Stitches är ett modernt CSS-in-JS-bibliotek som ger ett kraftfullt och flexibelt sätt att styla dina React-applikationer. Den erbjuder ett unikt tillvägagångssätt för styling som kombinerar de bästa delarna av CSS och JavaScript, vilket gör att du enkelt kan skapa dynamiska stilar.

Ställa in sömmar

Styla din React-applikation med stygn liknar med hjälp av biblioteket med formaterade komponenter. Med tanke på att stygn och stilade komponenter är båda CSS-in-JS-bibliotek som låter dig skriva stilar i JavaScript.

Innan du stylar din React-applikation måste du installera och konfigurera stygnbiblioteket. För att installera biblioteket med npm, kör följande kommando i din terminal:

npm install @stitches/react

Alternativt kan du installera biblioteket med hjälp av garn med detta kommando:

yarn add @stitches/react

När du har installerat stitches-biblioteket kan du börja styla din React-applikation.

Skapa stilade komponenter

För att skapa stiliserade komponenter tillhandahåller stygnbiblioteket en

stylad fungera. Den formaterade funktionen låter dig skapa stiliserade komponenter som kombinerar CSS-stilar och komponenternas logik.

De stylad funktion tar två argument. Det första är ett HTML/JSX-element och det andra är ett objekt som innehåller CSS-egenskaperna för att utforma det.

Så här kan du skapa en formaterad knappkomponent med hjälp av stylad fungera:

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

Kodblocket ovan skapar en Knapp komponent med en mörk bakgrundsfärg, grå textfärg, en kantradie och viss utfyllnad. Observera att du skriver CSS-egenskaperna i camelCase, inte kebab-case. Detta beror på att camelCase är ett vanligare sätt att skriva CSS-egenskaper i JavaScript.

När du har skapat den stiliserade knappkomponenten kan du importera den till dina React-komponenter och använda den.

Till exempel:

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

Detta exempel använder Knapp komponent i en App komponent. Knappen kommer att anta de stilar du skickade till stylad funktion, vilket får det att se ut så här:

De stylad funktionen låter dig också kapsla CSS-stilar, med en liknande syntax som tilläggsspråket SASS/SCSS. Detta gör det lättare för dig att organisera dina stilar och göra din kod mer läsbar.

Här är ett exempel med tekniken kapslade stilar:

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",
 },
});

Den här koden använder kapslade CSS-stilar och en pseudoklass för att rikta in sig på Knapp komponent. När du håller muspekaren över knappen visas den kapslade väljaren &:sväva ändrar knappens bakgrund och textfärger.

Styling med CSS-funktionen

Om du är obekväm med att skapa stiliserade komponenter, stygn biblioteket erbjuder css funktion, som kan generera klassnamn för att utforma dina komponenter. De css funktion tar ett JavaScript-objekt med CSS-egenskaper som sitt enda argument.

Så här kan du styla dina komponenter med hjälp av css fungera:

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;

De css funktionen skapar CSS-stilarna för knappen som den här koden sedan tilldelar till knappstil variabel. De knappstil funktionen genererar ett klassnamn för de definierade stilarna, som sedan skickas till klassnamn rekvisita av knapp komponent.

Skapa globala stilar

Använda stygn bibliotek, kan du också definiera globala stilar för din applikation med hjälp av globalCss fungera. GlobalCss-funktionen skapar och tillämpar globala stilar på din React-applikation.

Efter att ha definierat dina globala stilar med hjälp av globalCSS, anropa funktionen i din app komponent för att tillämpa stilarna på din applikation.

Till exempel:

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

Det här exemplet definierar stilarna för kropp element med hjälp av globalCss fungera. Samtalet ställer in bakgrundsfärgen till #f2f2f2 och textfärgen till #333333.

Skapa dynamiska stilar

En av de mer kraftfulla funktionerna i stygn bibliotek är dess förmåga att skapa dynamiska stilar. Du kan skapa stilar som beror på Reagera rekvisita med varianter nyckel. De varianter nyckeln är en egenskap hos både css och stylad funktioner. Du kan skapa så många varianter av din komponent som du vill.

Till exempel:

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",
 },
 },
 },
 },
});

Denna kod skapar en Knapp komponent med en Färg variant. De Färg variant låter dig ändra knappens färg baserat på en Färg stötta. När du väl har skapat Knapp komponent kan du använda den i din applikation.

Till exempel:

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

När du har renderat det här programmet kommer två knappar att visas på ditt gränssnitt. Knapparna kommer att se ut som bilden nedan.

Skapa tematokens

De stygn biblioteket låter dig skapa en uppsättning designtokens som definierar de visuella aspekterna av ditt användargränssnitt, såsom färger, typografi, avstånd och mer. Dessa tokens hjälper till att upprätthålla konsekvens och gör det enkelt att uppdatera din applikations övergripande stilar.

För att skapa dessa tematokens, använd skapa sömmar fungera. De skapa sömmar funktionen från stygnbiblioteket låter dig konfigurera biblioteket. Se till att använda skapa sömmar funktion i en stitches.configts fil eller en stitches.config.js fil.

Här är ett exempel på hur man skapar en tematoken:

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",
 },
 },
});

Nu när du har definierat dina tematokens kan du använda dem i dina komponentstilar.

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

Kodblocket ovan använder färgsymbolerna $grå och $svart för knappens bakgrund och textfärg. Den använder också utrymmessymbolerna $1 och $3 för att ställa in utfyllnad av knappen och variabeln teckenstorlek $1 för att ställa in knappens teckensnittsstorlek.

Effektiv styling med sömmar

Stygnbiblioteket ger ett kraftfullt och flexibelt sätt att styla dina React-applikationer. Med funktioner som utformade komponenter, dynamiska stilar och globalCSS kan du enkelt skapa komplexa mönster. Oavsett om du bygger en liten eller stor React-applikation kan sömmar vara ett utmärkt val för styling.

Ett bra alternativ till stygnbiblioteket är känslobiblioteket. Emotion är ett populärt CSS-in-JS-bibliotek som låter dig skriva stilar i JavaScript. Det är lätt att använda och erbjuder många funktioner för att skapa fantastiska stilar för din applikation.