Stilizarea unei aplicații React cu cusături

Stitches este o bibliotecă CSS-in-JS modernă care oferă o modalitate puternică și flexibilă de a vă stila aplicațiile React. Oferă o abordare unică a stilului care combină cele mai bune părți ale CSS și JavaScript, permițându-vă să creați cu ușurință stiluri dinamice.

Configurarea cusăturilor

Stilizarea aplicației dvs. React folosind ochiuri este asemănător cu folosind biblioteca de componente de stil. Având în vedere că cusăturile și componente-stilizate sunt ambele biblioteci CSS-in-JS care vă permit să scrieți stiluri în JavaScript.

Înainte de a vă stiliza aplicația React, trebuie să instalați și să configurați biblioteca de cusături. Pentru a instala biblioteca folosind npm, rulați următoarea comandă în terminalul dvs.:

npm install @stitches/react

Alternativ, puteți instala biblioteca folosind yarn cu această comandă:

yarn add @stitches/react

După ce ați instalat biblioteca de cusături, puteți începe să vă stilați aplicația React.

Crearea de componente cu stil

Pentru a crea componente cu stil, biblioteca de cusături oferă a stilizat funcţie. Funcția de stil vă permite să creați componente cu stil care combină stilurile CSS și logica componentelor.

The stilizat funcția ia două argumente. Primul este un element HTML/JSX, iar al doilea este un obiect care conține proprietățile CSS pentru stil.

Iată cum puteți crea o componentă de buton cu stil folosind stilizat funcţie:

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

Blocul de cod de mai sus creează un Buton componentă cu o culoare de fundal închisă, culoarea textului gri, o rază a marginii și unele umplutură. Rețineți că scrieți proprietățile CSS în camelCase, nu în kebab-case. Acest lucru se datorează faptului că camelCase este o modalitate mai comună de a scrie proprietăți CSS în JavaScript.

După ce ați creat componenta de buton cu stil, o puteți importa în componentele React și o puteți utiliza.

De exemplu:

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

Acest exemplu folosește Buton componentă într-o App componentă. Butonul va adopta stilurile pe care le-ați transmis stilizat funcție, făcând-o să arate astfel:

The stilizat funcția vă permite, de asemenea, să imbricați stiluri CSS, cu o sintaxă similară cu limbajul extensiei SASS/SCSS. Acest lucru vă ajută să vă organizați stilurile și să vă faceți codul mai ușor de citit.

Iată un exemplu folosind tehnica stilurilor imbricate:

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

Acest cod folosește stiluri CSS imbricate și o pseudo-clasă pentru a viza Buton componentă. Când treceți cu mouse-ul peste buton, selectorul imbricat &:planare modifică culorile de fundal și text ale butonului.

Stilizarea cu funcția CSS

Dacă nu vă simțiți confortabil când creați componente cu stil, ochiuri biblioteca oferă css funcția, care poate genera nume de clasă pentru a vă stila componentele. The css funcția ia un obiect JavaScript cu proprietăți CSS ca singur argument.

Iată cum vă puteți modela componentele folosind css funcţie:

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 funcția creează stilurile CSS pentru butonul pe care acest cod le atribuie apoi ButonStil variabil. The ButonStil funcția generează un nume de clasă pentru stilurile definite, care este apoi transmis la numele clasei prop de la buton componentă.

Crearea de stiluri globale

Folosind ochiuri bibliotecă, puteți defini, de asemenea, stiluri globale pentru aplicația dvs. folosind globalCss funcţie. Funcția globalCss creează și aplică stiluri globale aplicației dvs. React.

După definirea stilurilor globale folosind globalCSS, apelați funcția din dvs aplicația componentă pentru a aplica stilurile aplicației dvs.

De exemplu:

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

Acest exemplu definește stilurile pentru corp element folosind globalCss funcţie. Apelul setează culoarea de fundal la #f2f2f2 iar culoarea textului la #333333.

Crearea stilurilor dinamice

Una dintre cele mai puternice caracteristici ale ochiuri biblioteca este capacitatea sa de a crea stiluri dinamice. Puteți crea stiluri care depind de Reacții de recuzită cu variante cheie. The variante cheia este o proprietate a ambelor css și stilizat funcții. Puteți crea câte variante doriți ale componentei dvs.

De exemplu:

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

Acest cod creează un Buton componenta cu a culoare variantă. The culoare varianta vă permite să schimbați culoarea butonului pe baza unui culoare recuzită. Odată ce ați creat Buton componentă, o puteți utiliza în aplicația dvs.

De exemplu:

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

Odată ce randați această aplicație, pe interfața dvs. se vor afișa două butoane. Butoanele vor arăta ca în imaginea de mai jos.

Crearea de jetoane tematice

The ochiuri biblioteca vă permite să creați un set de simboluri de design care definesc aspectele vizuale ale interfeței dvs. de utilizare, cum ar fi culorile, tipografia, spațierea și multe altele. Aceste simboluri ajută la menținerea coerenței și fac ca actualizarea stilurilor generale ale aplicației să pară ușoară.

Pentru a crea aceste jetoane tematice, utilizați createStitches funcţie. The createStitches funcția din biblioteca de cusături vă permite să configurați biblioteca. Asigurați-vă că utilizați createStitches functia in a cusături.config.ts dosar sau a cusături.config.js fişier.

Iată un exemplu despre cum să creați un token temă:

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

Acum că ți-ai definit jetoanele tematice, le poți folosi în stilurile tale componente.

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

Blocul de cod de mai sus folosește simbolurile de culoare $gri și $negru pentru culoarea de fundal și text a butonului. De asemenea, folosește jetoanele de spațiu $1 și $3 pentru a seta umplutura butonului și variabila dimensiunea fontului $1 pentru a seta dimensiunea fontului butonului.

Coafare eficientă cu cusături

Biblioteca de cusături oferă o modalitate puternică și flexibilă de a vă stila aplicațiile React. Cu funcții precum componente cu stil, stiluri dinamice și globalCSS, puteți crea cu ușurință designuri complexe. Indiferent dacă construiți o aplicație React mică sau mare, cusăturile pot fi o alegere excelentă pentru coafare.

O alternativă excelentă la biblioteca de cusături este biblioteca de emoții. Emotion este o bibliotecă populară CSS-in-JS care vă permite să scrieți stiluri în JavaScript. Este ușor de utilizat și oferă multe caracteristici pentru a crea stiluri grozave pentru aplicația dvs.