Ši išmanioji paslaugų biblioteka gali pasirūpinti jūsų stiliaus poreikiais.
„Stitch“ yra moderni CSS-in-JS biblioteka, kuri suteikia galingą ir lankstų būdą formuoti „React“ programas. Tai unikalus požiūris į stilių, kuris sujungia geriausias CSS ir JavaScript dalis, todėl galite lengvai kurti dinamiškus stilius.
Dygsnių nustatymas
Sukurkite savo „React“ programos stilių naudodami siūlių yra panašus į naudojant stilizuotų komponentų biblioteką. Atsižvelgiant į tai, kad siūlės ir stiliaus komponentai yra CSS-in-JS bibliotekos, leidžiančios rašyti stilius JavaScript.
Prieš formuodami React programos stilių, turite įdiegti ir nustatyti siūlių biblioteką. Norėdami įdiegti biblioteką naudodami npm, savo terminale paleiskite šią komandą:
npm install @stitches/react
Arba galite įdiegti biblioteką naudodami verpalą naudodami šią komandą:
yarn add @stitches/react
Įdiegę siūlių biblioteką, galite pradėti formuoti React programos stilių.
Stilių komponentų kūrimas
Norėdami sukurti stilingus komponentus, siūlių biblioteka pateikia a
stiliaus funkcija. Stilių funkcija leidžia kurti stilizuotus komponentus, kuriuose derinami CSS stiliai ir komponentų logika.The stiliaus funkcijai reikia dviejų argumentų. Pirmasis yra HTML / JSX elementas, o antrasis yra objektas, kuriame yra CSS ypatybės, skirtos jo stiliui sukurti.
Štai kaip galite sukurti stiliaus mygtuko komponentą naudodami stiliaus 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",
});
Aukščiau pateiktas kodo blokas sukuria a Mygtukas komponentas su tamsia fono spalva, pilka teksto spalva, kraštinės spinduliu ir tam tikru užpildu. Atminkite, kad CSS ypatybes rašote „camelCase“, o ne „kebab-case“. Taip yra todėl, kad „camelCase“ yra labiau paplitęs CSS savybių rašymo būdas „JavaScript“.
Sukūrę stiliaus mygtuko komponentą, galite importuoti jį į „React“ komponentus ir naudoti.
Pavyzdžiui:
import React from"react";
import { Button } from"./Button";functionApp() {
return (
<>
exportdefault App;
Šiame pavyzdyje naudojama Mygtukas komponentas an Programėlė komponentas. Mygtukas priims stilius, kuriuos perdavėte stiliaus funkcija, todėl ji atrodo taip:
The stiliaus Funkcija taip pat leidžia įdėti CSS stilius, kurių sintaksė panaši į SASS/SCSS plėtinio kalba. Taip galėsite lengviau tvarkyti stilius ir padaryti kodą aiškesnį.
Štai įdėtųjų stilių technikos pavyzdys:
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 kodas naudoja įdėtus CSS stilius ir pseudoklasę Mygtukas komponentas. Užvedus pelės žymeklį virš mygtuko, įdėtas parinkiklis &: užveskite pelės žymeklį pakeičia mygtuko fono ir teksto spalvas.
Stilius naudojant CSS funkciją
Jei jums nepatogu kurti stiliaus komponentus, siūlių biblioteka siūlo css funkcija, kuri gali sugeneruoti klasių pavadinimus, kad sudarytų jūsų komponentų stilių. The css funkcija naudoja JavaScript objektą su CSS savybėmis kaip vienintelį argumentą.
Štai kaip galite sukurti savo komponentų stilių naudodami 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 (
<>
exportdefault App;
The css funkcija sukuria CSS stilius mygtukui, kurį šis kodas tada priskiria mygtukasStilius kintamasis. The mygtukasStilius funkcija sugeneruoja apibrėžtų stilių klasės pavadinimą, kuris vėliau perduodamas į klasės pavadinimas rekvizitas mygtuką komponentas.
Pasaulinių stilių kūrimas
Naudojant siūlių biblioteką, taip pat galite apibrėžti visuotinius savo programos stilius naudodami globalCss funkcija. Funkcija globalCss sukuria ir taiko visuotinius stilius jūsų React programai.
Apibrėžę savo pasaulinius stilius naudodami globalCSS, iškvieskite funkciją savo programėlė komponentą, kad pritaikytumėte stilius jūsų programai.
Pavyzdžiui:
import React from"react";
import { globalCss } from"@stitches/react";const globalStyles = globalCss({
body: { backgroundColor: "#f2f2f2", color: "#333333" },
});functionApp() {
globalStyles();return<>;
}
exportdefault App;
Šiame pavyzdyje apibrėžiami stiliai kūnas elementą naudojant globalCss funkcija. Skambutis nustato fono spalvą į #f2f2f2 ir teksto spalvą į #333333.
Dinaminių stilių kūrimas
Viena iš galingiausių funkcijų siūlių biblioteka yra jos gebėjimas kurti dinamiškus stilius. Galite kurti stilius, kurie priklauso nuo Reaguoti rekvizitai su variantai Raktas. The variantai raktas yra abiejų nuosavybė css ir stiliaus funkcijas. Galite sukurti tiek savo komponento variantų, kiek norite.
Pavyzdžiui:
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 kodas sukuria a Mygtukas komponentas su a spalva variantas. The spalva variantas leidžia pakeisti mygtuko spalvą pagal a spalva prop. Sukūrę Mygtukas komponentas, galite jį naudoti savo programoje.
Pavyzdžiui:
import React from"react";
import { Button } from"./Button";functionApp() {
return (
<>
exportdefault App;
Kai pateiksite šią programą, jūsų sąsajoje bus rodomi du mygtukai. Mygtukai atrodys taip, kaip paveikslėlyje žemiau.
Temų žetonų kūrimas
The siūlių biblioteka leidžia sukurti dizaino žetonų rinkinį, apibrėžiantį vizualius vartotojo sąsajos aspektus, pvz., spalvas, tipografiją, tarpus ir kt. Šie prieigos raktai padeda išlaikyti nuoseklumą ir palengvina bendrų programos stilių atnaujinimą.
Norėdami sukurti šiuos temų žetonus, naudokite kurti dygsnius funkcija. The kurti dygsnius funkcija iš siūlių bibliotekos leidžia konfigūruoti biblioteką. Būtinai naudokite kurti dygsnius funkcija a dygsniai.config.ts failas arba a stitches.config.js failą.
Štai pavyzdys, kaip sukurti temos prieigos raktą:
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",
},
},
});
Dabar, kai apibrėžėte temos prieigos raktus, galite juos naudoti savo komponentų stiliuose.
import { styled } from"../stitches.config.js";
exportconst Button = styled("button", {
padding: "$1 $3",
borderRadius: "12px",
fontSize: "$1",
border: "none",
color: '$black',
backgroundColor: '$gray',
});
Aukščiau pateiktame kodo bloke naudojami spalvų žetonai $ pilka ir $juodas mygtuko fono ir teksto spalvai. Jis taip pat naudoja erdvės žetonus $1 ir $3 norėdami nustatyti mygtuko užpildymą ir šrifto dydžio kintamąjį $1 norėdami nustatyti mygtuko šrifto dydį.
Efektyvus stilius su siūlėmis
Siūlių biblioteka yra galingas ir lankstus būdas formuoti React programas. Naudodami tokias funkcijas kaip stiliaus komponentai, dinamiški stiliai ir globalCSS, galite lengvai sukurti sudėtingus dizainus. Nesvarbu, ar kuriate mažą ar didelę React aplikaciją, dygsniai gali būti puikus pasirinkimas formuojant stilių.
Puiki siūlių bibliotekos alternatyva yra emocijų biblioteka. Emotion yra populiari CSS-in-JS biblioteka, leidžianti rašyti stilius JavaScript. Jį lengva naudoti ir siūlo daugybę funkcijų, leidžiančių sukurti puikius jūsų programos stilius.