Oblikovanje React aplikacije šavovima

Stitches je moderna CSS-in-JS biblioteka koja pruža moćan i fleksibilan način za stiliziranje vaših React aplikacija. Nudi jedinstveni pristup stiliziranju koji kombinira najbolje dijelove CSS-a i JavaScripta, omogućujući vam jednostavno stvaranje dinamičkih stilova.

Postavljanje šavova

Stilizirajte svoju React aplikaciju pomoću šavova je sličan koristeći biblioteku stiliziranih komponenti. S obzirom na to da šavovi i stilizirane-komponente obje su CSS-in-JS biblioteke koje vam omogućuju pisanje stilova u JavaScriptu.

Prije oblikovanja vaše React aplikacije, morate instalirati i postaviti biblioteku šavova. Da biste instalirali biblioteku koristeći npm, pokrenite sljedeću naredbu na vašem terminalu:

npm install @stitches/react

Alternativno, možete instalirati biblioteku koristeći yarn s ovom naredbom:

yarn add @stitches/react

Nakon što ste instalirali biblioteku šavova, možete početi oblikovati svoju React aplikaciju.

Stvaranje stiliziranih komponenti

Za izradu stiliziranih komponenti, biblioteka šavova pruža a stilizirani funkcija. Stilizirana funkcija omogućuje vam stvaranje stiliziranih komponenti koje kombiniraju CSS stilove i logiku komponenti.

The stilizirani funkcija prima dva argumenta. Prvi je HTML/JSX element, a drugi je objekt koji sadrži CSS svojstva za stiliziranje.

Evo kako možete stvoriti stiliziranu komponentu gumba pomoću stilizirani funkcija:

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

Gornji blok koda stvara a Dugme komponenta s tamnom bojom pozadine, sivom bojom teksta, radijusom obruba i malo ispune. Imajte na umu da CSS svojstva pišete u camelCase, a ne u kebab-case. To je zato što je camelCase uobičajeniji način pisanja CSS svojstava u JavaScriptu.

Nakon što ste izradili stiliziranu komponentu gumba, možete je uvesti u svoje React komponente i koristiti.

Na primjer:

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

Ovaj primjer koristi Dugme komponenta u an aplikacija komponenta. Gumb će usvojiti stilove koje ste proslijedili stilizirani funkcija, zbog čega izgleda ovako:

The stilizirani funkcija također omogućuje ugniježđivanje CSS stilova, sa sličnom sintaksom jezik proširenja SASS/SCSS. To vam olakšava organiziranje stilova i čini vaš kod čitljivijim.

Evo primjera korištenja tehnike ugniježđenih stilova:

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

Ovaj kod koristi ugniježđene CSS stilove i pseudo-klasu za ciljanje Dugme komponenta. Kada zadržite pokazivač iznad gumba, ugniježđeni birač &:lebdjeti mijenja boju pozadine i teksta gumba.

Stiliziranje s CSS funkcijom

Ako vam je neugodno stvarati stilizirane komponente, šavova knjižnica nudi css funkcija koja može generirati nazive klasa za stiliziranje vaših komponenti. The css funkcija uzima JavaScript objekt sa CSS svojstvima kao jedini argument.

Evo kako možete oblikovati svoje komponente pomoću css funkcija:

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 stvara CSS stilove za gumb koji ovaj kod zatim dodjeljuje buttonStyle varijabla. The buttonStyle funkcija generira naziv klase za definirane stilove, koji se zatim prosljeđuje u naziv klase oslonac od dugme komponenta.

Stvaranje globalnih stilova

Koristiti šavova biblioteke, također možete definirati globalne stilove za svoju aplikaciju pomoću globalCss funkcija. Funkcija globalCss stvara i primjenjuje globalne stilove na vašu React aplikaciju.

Nakon definiranja vaših globalnih stilova pomoću globalCSS, pozovite funkciju u svom aplikacija komponentu za primjenu stilova na vašu aplikaciju.

Na primjer:

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

Ovaj primjer definira stilove za tijelo element pomoću globalCss funkcija. Poziv postavlja boju pozadine na #f2f2f2 i boju teksta na #333333.

Stvaranje dinamičkih stilova

Jedna od moćnijih značajki šavova biblioteka je njegova sposobnost stvaranja dinamičnih stilova. Možete stvoriti stilove koji ovise o React rekviziti s varijante ključ. The varijante ključ je svojstvo oba css i stilizirani funkcije. Možete stvoriti onoliko varijanti svoje komponente koliko želite.

Na primjer:

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

Ovaj kod stvara a Dugme komponenta s a boja varijanta. The boja varijanta vam omogućuje promjenu boje gumba na temelju a boja oslonac Nakon što ste stvorili Dugme komponentu, možete je koristiti u svojoj aplikaciji.

Na primjer:

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

Nakon što renderirate ovu aplikaciju, dva gumba će se prikazati na vašem sučelju. Gumbi će izgledati kao na slici ispod.

Stvaranje tematskih tokena

The šavova biblioteka vam omogućuje stvaranje skupa dizajnerskih tokena koji definiraju vizualne aspekte vašeg korisničkog sučelja, poput boja, tipografije, razmaka i više. Ovi tokeni pomažu u održavanju dosljednosti i čine da ažuriranje ukupnih stilova vaše aplikacije izgleda jednostavno.

Za izradu ovih tokena tema upotrijebite stvoriti šavove funkcija. The stvoriti šavove funkcija iz biblioteke uboda omogućuje vam konfiguraciju biblioteke. Obavezno koristite stvoriti šavove funkcija u a šavovi.config.ts datoteka ili a šavovi.config.js datoteka.

Evo primjera kako stvoriti token teme:

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

Sada kada ste definirali svoje tematske tokene, možete ih koristiti u svojim stilovima komponenti.

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

Gornji blok koda koristi žetone boja $siva i $crna za boju pozadine i teksta gumba. Također koristi žetone razmaka $1 i $3 za postavljanje ispune gumba i varijable veličine fonta $1 za postavljanje veličine fonta gumba.

Učinkovito oblikovanje sa šavovima

Biblioteka šavova pruža moćan i fleksibilan način za stiliziranje vaših React aplikacija. Uz značajke kao što su stilizirane komponente, dinamički stilovi i globalCSS, možete jednostavno stvoriti složene dizajne. Bilo da gradite malu ili veliku React aplikaciju, šavovi mogu biti izvrstan izbor za stiliziranje.

Izvrsna alternativa biblioteci šavova je biblioteka emocija. Emotion je popularna biblioteka CSS-in-JS koja vam omogućuje pisanje stilova u JavaScriptu. Jednostavan je za korištenje i nudi mnoge značajke za stvaranje sjajnih stilova za vašu aplikaciju.