Reacti rakenduse kujundamine õmblustega

Stitches on kaasaegne CSS-in-JS teek, mis pakub võimsat ja paindlikku viisi Reacti rakenduste kujundamiseks. See pakub ainulaadset lähenemist stiilile, mis ühendab CSS-i ja JavaScripti parimad osad, võimaldades teil hõlpsalt luua dünaamilisi stiile.

Õmbluste seadistamine

Reacti rakenduse kujundamine kasutades õmblused on sarnane stiilikomponentide teeki kasutades. Arvestades, et õmblused ja stiililised komponendid on mõlemad CSS-in-JS teegid, mis võimaldavad teil JavaScriptis stiile kirjutada.

Enne Reacti rakenduse stiili kujundamist peate installima ja seadistama õmblusteeki. Teegi installimiseks npm-i abil käivitage terminalis järgmine käsk:

npm install @stitches/react

Teise võimalusena saate installida teeki kasutades lõnga järgmise käsuga:

yarn add @stitches/react

Kui olete õmblusteeki installinud, võite alustada Reacti rakenduse stiili kujundamist.

Stiilikomponentide loomine

Stiilikomponentide loomiseks pakub õmblusteek a

stiilis funktsiooni. Stiilifunktsioon võimaldab teil luua stiiliga komponente, mis ühendavad CSS-stiile ja komponentide loogika.

The stiilis funktsioon võtab kaks argumenti. Esimene on HTML/JSX-element ja teine ​​objekt, mis sisaldab CSS-i atribuute selle kujundamiseks.

Siit saate teada, kuidas saate luua stiiliga nupukomponendi, kasutades stiilis funktsioon:

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

Ülaltoodud koodiplokk loob a Nupp tumeda taustavärvi, halli tekstivärvi, äärise raadiuse ja mõne polsterdusega komponent. Pange tähele, et kirjutate CSS-i atribuudid camelCase'is, mitte kebab-case'is. Selle põhjuseks on asjaolu, et camelCase on JavaScripti CSS-i atribuutide kirjutamise levinum viis.

Kui olete stiiliga nupu komponendi loonud, saate selle oma Reacti komponentidesse importida ja kasutada.

Näiteks:

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

See näide kasutab Nupp komponent an Rakendus komponent. Nupp võtab kasutusele stiilid, mille edastasite stiilis funktsioon, muutes selle välja selliseks:

The stiilis funktsioon võimaldab ka pesastada CSS-i stiile, millel on sarnane süntaks SASS/SCSS laienduskeel. See muudab stiilide korraldamise lihtsamaks ja muudab koodi loetavamaks.

Siin on näide pesastatud stiilide tehnikast:

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

See kood kasutab sihtimiseks pesastatud CSS-i stiile ja pseudoklassi Nupp komponent. Kui hõljutate kursorit nupu kohal, pesastatud valija &:hõljuma muudab nupu tausta ja teksti värve.

Stiilimine CSS-funktsiooniga

Kui teile ei meeldi stiililiste komponentide loomine, õmblused raamatukogu pakub css funktsioon, mis võib teie komponentide kujundamiseks genereerida klassinimesid. The css funktsioon võtab ainsa argumendina CSS-i atribuutidega JavaScripti objekti.

Siit saate teada, kuidas saate oma komponente stiili kasutades kujundada css funktsioon:

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;

The css funktsioon loob nupule CSS-stiilid, mille see kood seejärel nupule määrab nupu Stiil muutuv. The nupu Stiil funktsioon genereerib määratletud stiilidele klassinime, mis seejärel edastatakse klassi nimi prop of the nuppu komponent.

Globaalsete stiilide loomine

Kasutades õmblused raamatukogu, saate määrata ka oma rakendusele globaalseid stiile, kasutades globalCss funktsiooni. Funktsioon globalCss loob ja rakendab teie Reacti rakendusele globaalseid stiile.

Pärast globaalsete stiilide määratlemist, kasutades globalCSS, helistage funktsioonile oma rakendus komponendi stiilide rakendamiseks oma rakendusele.

Näiteks:

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

See näide määratleb stiilid keha elementi kasutades globalCss funktsiooni. Kõne määrab taustavärvi #f2f2f2 ja teksti värv #333333.

Dünaamiliste stiilide loomine

Üks võimsamaid funktsioone õmblused raamatukogu on selle võime luua dünaamilisi stiile. Saate luua stiile, mis sõltuvad Reageeri rekvisiidid koos variandid võti. The variandid võti on mõlema omadus css ja stiilis funktsioonid. Saate luua oma komponendist nii palju variante, kui soovite.

Näiteks:

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

See kood loob a Nupp komponent koos a värvi variant. The värvi variant võimaldab muuta nupu värvi vastavalt a värvi prop. Kui olete loonud Nupp komponenti, saate seda oma rakenduses kasutada.

Näiteks:

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

Kui olete selle rakenduse renderdanud, kuvatakse teie liidesel kaks nuppu. Nupud näevad välja nagu alloleval pildil.

Teemamärkide loomine

The õmblused teek võimaldab teil luua kujundusmärkide komplekti, mis määratlevad teie kasutajaliidese visuaalsed aspektid, nagu värvid, tüpograafia, vahed ja palju muud. Need märgid aitavad säilitada järjepidevust ja muudavad rakenduse üldiste stiilide värskendamise lihtsaks.

Nende teemamärkide loomiseks kasutage luua õmblusi funktsiooni. The luua õmblusi funktsioon õmbluste teegist võimaldab teil teeki konfigureerida. Kasutage kindlasti luua õmblusi funktsioon a stiches.config.ts fail või a stitches.config.js faili.

Siin on näide teema märgi loomise kohta.

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

Nüüd, kui olete oma teemamärgid määratlenud, saate neid kasutada oma komponentide stiilides.

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

Ülaltoodud koodiplokk kasutab värvimärke $hall ja $must nupu tausta ja teksti värvi jaoks. See kasutab ka ruumimärke $1 ja $3 nupu polsterduse ja fondisuuruse muutuja määramiseks $1 nupu fondi suuruse määramiseks.

Tõhus stiil õmblustega

Õmblusteek pakub võimsat ja paindlikku viisi Reacti rakenduste stiili kujundamiseks. Funktsioonidega, nagu stiililised komponendid, dünaamilised stiilid ja globalCSS, saate hõlpsasti luua keerukaid kujundusi. Olenemata sellest, kas ehitate väikest või suurt Reacti rakendust, võivad õmblused olla stiili kujundamisel suurepärane valik.

Suurepärane alternatiiv õmblusteekile on emotsioonide raamatukogu. Emotion on populaarne CSS-in-JS teek, mis võimaldab teil JavaScriptis stiile kirjutada. Seda on lihtne kasutada ja see pakub palju funktsioone oma rakenduse jaoks suurepäraste stiilide loomiseks.