React-sovelluksen muotoilu ompeleilla

Stitches on moderni CSS-in-JS-kirjasto, joka tarjoaa tehokkaan ja joustavan tavan muotoilla React-sovelluksiasi. Se tarjoaa ainutlaatuisen lähestymistavan tyyliin, jossa yhdistyvät CSS: n ja JavaScriptin parhaat puolet, jolloin voit luoda dynaamisia tyylejä helposti.

Ompeleiden asettaminen

React-sovelluksen muotoilu käyttämällä ompeleita on samanlainen kuin käyttämällä tyylillisten komponenttien kirjastoa. Ottaen huomioon, että ompeleet ja tyylilliset komponentit ovat molemmat CSS-in-JS-kirjastoja, joiden avulla voit kirjoittaa tyylejä JavaScriptissä.

Ennen kuin muotoilet React-sovelluksesi, sinun on asennettava ja määritettävä ommelkirjasto. Asenna kirjasto npm: llä suorittamalla seuraava komento päätteessäsi:

npm install @stitches/react

Vaihtoehtoisesti voit asentaa kirjaston käyttämällä lankaa tällä komennolla:

yarn add @stitches/react

Kun olet asentanut ommelkirjaston, voit aloittaa React-sovelluksen muotoilun.

Tyylisten komponenttien luominen

Tyylikkäiden komponenttien luomiseksi ompelekirjasto tarjoaa a tyylistä toiminto. Tyylitelty toiminnon avulla voit luoda tyyliteltyjä komponentteja, joissa yhdistyvät CSS-tyylit ja komponenttien logiikka.

The tyylistä funktio ottaa kaksi argumenttia. Ensimmäinen on HTML/JSX-elementti, ja toinen on objekti, joka sisältää CSS-ominaisuudet sen tyylistämiseksi.

Näin voit luoda tyylitellyn painikekomponentin käyttämällä tyylistä toiminto:

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

Yllä oleva koodilohko luo a Painike komponentti, jossa on tumma taustaväri, harmaa tekstin väri, reunuksen säde ja hieman täyte. Huomaa, että kirjoitat CSS-ominaisuudet camelCase-kirjaimella, et kebab-kotelolla. Tämä johtuu siitä, että camelCase on yleisempi tapa kirjoittaa CSS-ominaisuuksia JavaScriptiin.

Kun olet luonut tyylitellyn painikekomponentin, voit tuoda sen React-komponentteihin ja käyttää sitä.

Esimerkiksi:

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

Tässä esimerkissä käytetään Painike komponentti an Sovellus komponentti. Painike ottaa käyttöön sovellukselle siirtämäsi tyylit tyylistä funktio, jolloin se näyttää tältä:

The tyylistä -funktion avulla voit myös upottaa CSS-tyylejä, joilla on samanlainen syntaksi kuin SASS/SCSS-laajennuskieli. Tämä helpottaa tyylien järjestämistä ja tekee koodistasi luettavamman.

Tässä on esimerkki sisäkkäisten tyylien tekniikasta:

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

Tämä koodi käyttää sisäkkäisiä CSS-tyylejä ja pseudoluokkaa kohdistamiseen Painike komponentti. Kun viet hiiren painikkeen päälle, sisäkkäinen valitsin &:hover muuttaa painikkeen taustan ja tekstin väriä.

Muotoilu CSS-toiminnolla

Jos tyylillisten komponenttien luominen tuntuu epämukavalta, ompeleita kirjasto tarjoaa css funktio, joka voi luoda luokkien nimiä komponenttien tyyliä varten. The css funktio ottaa JavaScript-objektin, jonka ainoana argumenttina on CSS-ominaisuudet.

Näin voit muotoilla komponenttejasi käyttämällä css toiminto:

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 -toiminto luo CSS-tyylit painikkeelle, jonka tämä koodi sitten määrittää painikkeelle buttonStyle muuttuja. The buttonStyle funktio luo määritetyille tyyleille luokan nimen, joka välitetään sitten luokan nimi prop of the -painiketta komponentti.

Globaalien tyylien luominen

Käyttämällä ompeleita kirjastossa, voit myös määrittää yleisiä tyylejä sovelluksellesi käyttämällä globalCss toiminto. GlobalCss-funktio luo globaaleja tyylejä ja käyttää niitä React-sovelluksessasi.

Kun olet määrittänyt globaalit tyylisi käyttämällä globaaliCSS, kutsu toimintoa sovellus komponentti soveltaaksesi tyylejä sovellukseesi.

Esimerkiksi:

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

Tämä esimerkki määrittelee tyylit kehon elementtiä käyttämällä globalCss toiminto. Puhelu asettaa taustavärin #f2f2f2 ja tekstin väri #333333.

Dynaamisten tyylien luominen

Yksi tehokkaimmista ominaisuuksista ompeleita kirjasto on sen kyky luoda dynaamisia tyylejä. Voit luoda tyylejä, jotka riippuvat Reagoi rekvisiitta kanssa muunnelmia avain. The muunnelmia avain on molempien ominaisuus css ja tyylistä toimintoja. Voit luoda komponentistasi niin monta muunnelmaa kuin haluat.

Esimerkiksi:

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

Tämä koodi luo a Painike komponentti a väri variantti. The väri variantin avulla voit muuttaa painikkeen väriä a väri prop. Kun olet luonut Painike komponenttia, voit käyttää sitä sovelluksessasi.

Esimerkiksi:

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

Kun teet tämän sovelluksen, käyttöliittymässäsi näkyy kaksi painiketta. Painikkeet näyttävät alla olevan kuvan kaltaisilta.

Teemamerkkien luominen

The ompeleita kirjaston avulla voit luoda joukon suunnittelutunnuksia, jotka määrittelevät käyttöliittymäsi visuaaliset näkökohdat, kuten värit, typografian, välit ja paljon muuta. Nämä tunnukset auttavat ylläpitämään johdonmukaisuutta ja tekevät sovelluksesi yleistyylien päivittämisestä helppoa.

Voit luoda nämä teematunnisteet käyttämällä luo ompeleita toiminto. The luo ompeleita ommelkirjaston toiminnolla voit määrittää kirjaston. Varmista, että käytät luo ompeleita toiminto kohdassa a stitches.config.ts tiedosto tai a stitches.config.js tiedosto.

Tässä on esimerkki teematunnuksen luomisesta:

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

Nyt kun olet määrittänyt teematunnuksesi, voit käyttää niitä komponenttityyleissäsi.

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

Yllä oleva koodilohko käyttää värimerkkejä $harmaa ja $musta painikkeen taustan ja tekstin värille. Se käyttää myös tilamerkkejä $1 ja $3 asettaaksesi painikkeen täytön ja kirjasinkokomuuttujan $1 asettaaksesi painikkeen kirjasinkoon.

Tehokas muotoilu ompeleilla

Ommelkirjasto tarjoaa tehokkaan ja joustavan tavan muotoilla React-sovelluksiasi. Tyylistettujen komponenttien, dynaamisten tyylien ja globalCSS: n kaltaisten ominaisuuksien avulla voit luoda helposti monimutkaisia ​​malleja. Olitpa rakentamassa pientä tai suurta React-sovellusta, ompeleet voivat olla erinomainen valinta muotoiluun.

Loistava vaihtoehto ommelkirjastolle on tunnekirjasto. Emotion on suosittu CSS-in-JS-kirjasto, jonka avulla voit kirjoittaa tyylejä JavaScriptillä. Se on helppokäyttöinen ja tarjoaa monia ominaisuuksia loistavien tyylien luomiseen sovellukseesi.