Oblikovanje aplikacije React s šivi

Stitches je sodobna knjižnica CSS-in-JS, ki zagotavlja zmogljiv in prilagodljiv način za oblikovanje vaših aplikacij React. Ponuja edinstven pristop k slogu, ki združuje najboljše dele CSS in JavaScript, kar vam omogoča enostavno ustvarjanje dinamičnih slogov.

Nastavitev šivov

Oblikovanje vaše aplikacije React z uporabo šivi je podoben z uporabo knjižnice stiliziranih komponent. Glede na to, da šivi in stilizirane komponente sta obe knjižnici CSS-in-JS, ki omogočata pisanje slogov v JavaScript.

Preden oblikujete svojo aplikacijo React, morate namestiti in nastaviti knjižnico šivov. Če želite knjižnico namestiti z uporabo npm, zaženite naslednji ukaz v vašem terminalu:

npm install @stitches/react

Druga možnost je, da namestite knjižnico z uporabo preje s tem ukazom:

yarn add @stitches/react

Ko namestite knjižnico šivov, lahko začnete oblikovati svojo aplikacijo React.

Ustvarjanje stiliziranih komponent

Za ustvarjanje stiliziranih komponent nudi knjižnica šivov a

stilizirano funkcijo. Slogirana funkcija vam omogoča ustvarjanje stiliziranih komponent, ki združujejo sloge CSS in logiko komponent.

The stilizirano funkcija sprejme dva argumenta. Prvi je element HTML/JSX, drugi pa je predmet, ki vsebuje lastnosti CSS za oblikovanje.

Evo, kako lahko ustvarite oblikovano komponento gumba z uporabo stilizirano 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",
});

Zgornji blok kode ustvari a Gumb komponento s temno barvo ozadja, sivo barvo besedila, polmerom obrobe in nekaj oblazinjenja. Upoštevajte, da lastnosti CSS pišete v camelCase, ne v kebab-case. To je zato, ker je CamelCase pogostejši način pisanja lastnosti CSS v JavaScript.

Ko ustvarite komponento oblikovanega gumba, jo lahko uvozite v komponente React in jo uporabite.

Na primer:

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

Ta primer uporablja Gumb komponenta v an aplikacija komponento. Gumb bo sprejel sloge, ki ste jih posredovali stilizirano funkcijo, zaradi česar je videti takole:

The stilizirano omogoča tudi ugnezdenje slogov CSS s podobno sintakso kot jezik razširitve SASS/SCSS. Tako boste lažje organizirali svoje sloge in naredili kodo bolj berljivo.

Tukaj je primer uporabe tehnike ugnezdenih slogov:

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

Ta koda uporablja ugnezdene sloge CSS in psevdorazred za ciljanje na Gumb komponento. Ko miškin kazalec premaknete nad gumb, ugnezdeni izbirnik &:lebdi spremeni barvo ozadja in besedila gumba.

Slog s funkcijo CSS

Če vam je neprijetno ustvarjati stilizirane komponente, šivi knjižnica ponuja css funkcijo, ki lahko ustvari imena razredov za oblikovanje vaših komponent. The css funkcija vzame objekt JavaScript z lastnostmi CSS kot edini argument.

Tukaj je opisano, kako lahko oblikujete svoje komponente z uporabo 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 funkcija ustvari sloge CSS za gumb, ki jih ta koda nato dodeli buttonStyle spremenljivka. The buttonStyle ustvari ime razreda za definirane sloge, ki se nato posreduje v className rekvizit za gumb komponento.

Ustvarjanje globalnih stilov

Uporabljati šivi lahko definirate tudi globalne sloge za svojo aplikacijo z uporabo globalCss funkcijo. Funkcija globalCss ustvari in uporabi globalne sloge v vaši aplikaciji React.

Ko definirate svoje globalne sloge z uporabo globalCSS, pokličite funkcijo v svojem aplikacija komponento za uporabo slogov v vaši aplikaciji.

Na primer:

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

Ta primer definira sloge za telo element z uporabo globalCss funkcijo. Klic nastavi barvo ozadja na #f2f2f2 in barvo besedila #333333.

Ustvarjanje dinamičnih slogov

Ena izmed močnejših lastnosti šivi Knjižnica je njegova sposobnost ustvarjanja dinamičnih slogov. Ustvarite lahko sloge, ki so odvisni od React props z različice ključ. The različice ključ je lastnost obeh css in stilizirano funkcije. Ustvarite lahko toliko različic svoje komponente, kot želite.

Na primer:

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

Ta koda ustvari a Gumb komponenta z a barva varianta. The barva različica omogoča spreminjanje barve gumba glede na a barva prop. Ko ustvarite Gumb komponento, jo lahko uporabite v svoji aplikaciji.

Na primer:

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

Ko upodabljate to aplikacijo, se bosta na vašem vmesniku prikazala dva gumba. Gumbi bodo videti kot na spodnji sliki.

Ustvarjanje tematskih žetonov

The šivi knjižnica vam omogoča, da ustvarite niz oblikovalskih žetonov, ki definirajo vizualne vidike vašega uporabniškega vmesnika, kot so barve, tipografija, razmiki in drugo. Ti žetoni pomagajo ohranjati doslednost in poskrbijo, da je posodabljanje splošnih slogov vaše aplikacije videti preprosto.

Če želite ustvariti te tematske žetone, uporabite createStitches funkcijo. The createStitches funkcija iz knjižnice šivov vam omogoča, da konfigurirate knjižnico. Poskrbite za uporabo createStitches funkcija v a stitches.config.ts datoteka ali a stitches.config.js mapa.

Tukaj je primer, kako ustvariti žeton 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",
 },
 },
});

Zdaj, ko ste definirali svoje žetone teme, jih lahko uporabite v svojih slogih komponent.

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

Zgornji kodni blok uporablja barvne žetone $siva in $črna za barvo ozadja in besedila gumba. Uporablja tudi presledne žetone $1 in $3 da nastavite oblazinjenje gumba in spremenljivko velikosti pisave $1 za nastavitev velikosti pisave gumba.

Učinkovito oblikovanje s šivi

Knjižnica šivov ponuja močan in prilagodljiv način za oblikovanje vaših aplikacij React. S funkcijami, kot so stilizirane komponente, dinamični slogi in globalCSS, lahko preprosto ustvarite kompleksne dizajne. Ne glede na to, ali gradite majhno ali veliko aplikacijo React, so šivi lahko odlična izbira za oblikovanje.

Odlična alternativa knjižnici šivov je knjižnica čustev. Emotion je priljubljena knjižnica CSS-in-JS, ki omogoča pisanje slogov v JavaScript. Je enostaven za uporabo in ponuja številne funkcije za ustvarjanje odličnih slogov za vašo aplikacijo.