React aplikācijas veidošana ar šuvēm

Stitches ir moderna CSS-in-JS bibliotēka, kas nodrošina jaudīgu un elastīgu veidu, kā veidot React lietojumprogrammas. Tā piedāvā unikālu pieeju stilam, kas apvieno labākās CSS un JavaScript daļas, ļaujot jums viegli izveidot dinamiskus stilus.

Šuvju uzstādīšana

React lietojumprogrammas stilizēšana, izmantojot šuves ir līdzīgs izmantojot stilizētu komponentu bibliotēku. Ņemot vērā, ka šuves un stilizētas sastāvdaļas abas ir CSS-in-JS bibliotēkas, kas ļauj rakstīt stilus JavaScript.

Pirms React lietojumprogrammas stila veidošanas jums ir jāinstalē un jāiestata dūrienu bibliotēka. Lai instalētu bibliotēku, izmantojot npm, terminālī palaidiet šādu komandu:

npm install @stitches/react

Varat arī instalēt bibliotēku, izmantojot dziju ar šo komandu:

yarn add @stitches/react

Kad esat instalējis šuvju bibliotēku, varat sākt veidot savu React lietojumprogrammu.

Stilētu komponentu izveide

Lai izveidotu stilizētus komponentus, šuvju bibliotēka nodrošina a

stilizēts funkciju. Stilizētā funkcija ļauj izveidot stilizētus komponentus, kas apvieno CSS stilus un komponentu loģiku.

The stilizēts funkcijai nepieciešami divi argumenti. Pirmais ir HTML/JSX elements, bet otrais ir objekts, kas satur CSS rekvizītus, lai to veidotu.

Lūk, kā varat izveidot stilizētu pogas komponentu, izmantojot stilizēts 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",
});

Iepriekš minētais koda bloks izveido a Poga komponents ar tumšu fona krāsu, pelēku teksta krāsu, apmales rādiusu un nedaudz polsterējuma. Ņemiet vērā, ka jūs rakstāt CSS rekvizītus camelCase, nevis kebab-case. Tas ir tāpēc, ka camelCase ir izplatītāks veids, kā rakstīt CSS rekvizītus JavaScript.

Kad esat izveidojis stila pogas komponentu, varat to importēt savos React komponentos un izmantot.

Piemēram:

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

Šajā piemērā tiek izmantots Poga komponents an App komponents. Poga pārņems stilus, kurus nosūtījāt stilizēts funkciju, liekot tai izskatīties šādi:

The stilizēts funkcija arī ļauj ligzdot CSS stilus ar līdzīgu sintaksi SASS/SCSS paplašinājuma valoda. Tādējādi ir vieglāk sakārtot stilus un padarīt kodu lasāmāku.

Šeit ir ligzdoto stilu tehnikas izmantošanas piemērs:

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

Šis kods izmanto ligzdotos CSS stilus un pseidoklasi, lai atlasītu mērķauditoriju Poga komponents. Novietojot kursoru virs pogas, ligzdots atlasītājs &:virziet kursoru maina pogas fona un teksta krāsas.

Stils ar CSS funkciju

Ja jums ir neērti veidot stila komponentus, šuves bibliotēka piedāvā css funkcija, kas var ģenerēt klašu nosaukumus, lai veidotu jūsu komponentus. The css funkcija kā vienīgo argumentu izmanto JavaScript objektu ar CSS īpašībām.

Lūk, kā varat veidot savu komponentu stilu, izmantojot 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 izveido CSS stilus pogai, ko šis kods pēc tam piešķir pogasStils mainīgs. The pogasStils funkcija ģenerē definētajiem stiliem klases nosaukumu, kas pēc tam tiek nodots klasesNosaukums rekvizīti pogu komponents.

Globālo stilu izveide

Izmantojot šuves bibliotēku, varat arī definēt globālos stilus savai lietojumprogrammai, izmantojot globalCss funkciju. Funkcija globalCss izveido un piemēro globālos stilus jūsu React lietojumprogrammai.

Pēc globālo stilu noteikšanas, izmantojot globālaisCSS, izsauciet funkciju savā lietotne komponents, lai piemērotu stilus savai lietojumprogrammai.

Piemēram:

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

Šis piemērs definē stilus ķermeni elements, izmantojot globalCss funkciju. Zvans iestata fona krāsu uz #f2f2f2 un teksta krāsu uz #333333.

Dinamisku stilu izveide

Viena no jaudīgākajām funkcijām šuves bibliotēka ir tās spēja radīt dinamiskus stilus. Varat izveidot stilus, kas ir atkarīgi no Reaģēt rekvizīti Ar varianti taustiņu. The varianti atslēga ir abu īpašums css un stilizēts funkcijas. Varat izveidot tik daudz sava komponenta variantu, cik vēlaties.

Piemēram:

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

Šis kods rada a Poga komponents ar a krāsa variants. The krāsa variants ļauj mainīt pogas krāsu, pamatojoties uz a krāsa prop. Kad esat izveidojis Poga komponentu, varat to izmantot savā lietojumprogrammā.

Piemēram:

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

Kad esat atveidojis šo lietojumprogrammu, saskarnē tiks parādītas divas pogas. Pogas izskatīsies kā attēlā zemāk.

Motīvu marķieru izveide

The šuves bibliotēka ļauj izveidot dizaina marķieru kopu, kas definē lietotāja interfeisa vizuālos aspektus, piemēram, krāsas, tipogrāfiju, atstarpes un citus. Šie marķieri palīdz uzturēt konsekvenci un atvieglo lietojumprogrammas vispārējo stilu atjaunināšanu.

Lai izveidotu šos motīvu marķierus, izmantojiet izveidot Šuves funkciju. The izveidot Šuves Funkcija no dūrienu bibliotēkas ļauj konfigurēt bibliotēku. Noteikti izmantojiet izveidot Šuves funkcija a šuves.config.ts failu vai a stitches.config.js failu.

Šeit ir piemērs, kā izveidot motīva marķieri:

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

Tagad, kad esat definējis motīvu marķierus, varat tos izmantot savos komponentu stilos.

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

Iepriekš minētajā koda blokā tiek izmantoti krāsu marķieri $ pelēks un $melns pogas fona un teksta krāsai. Tas izmanto arī atstarpes žetonus $1 un $3 lai iestatītu pogas polsterējumu un fonta lieluma mainīgo $1 lai iestatītu pogas fonta lielumu.

Efektīva ieveidošana ar šuvēm

Dūrienu bibliotēka nodrošina jaudīgu un elastīgu veidu, kā veidot React lietojumprogrammas. Izmantojot tādas funkcijas kā stilizēti komponenti, dinamiski stili un globalCSS, varat viegli izveidot sarežģītus dizainus. Neatkarīgi no tā, vai veidojat mazu vai lielu React aplikāciju, šuves var būt lieliska izvēle stila veidošanai.

Lieliska alternatīva dūrienu bibliotēkai ir emociju bibliotēka. Emotion ir populāra CSS-in-JS bibliotēka, kas ļauj rakstīt stilus JavaScript. To ir viegli lietot, un tas piedāvā daudzas funkcijas lielisku stilu izveidei jūsu lietojumprogrammai.