Styling aplikácie React pomocou stehov

Stitches je moderná knižnica CSS-in-JS, ktorá poskytuje výkonný a flexibilný spôsob úpravy vašich aplikácií React. Ponúka jedinečný prístup k štýlu, ktorý kombinuje najlepšie časti CSS a JavaScript, čo vám umožňuje ľahko vytvárať dynamické štýly.

Nastavenie stehov

Štýl vašej aplikácie React pomocou stehy je podobný pomocou knižnice štylizovaných komponentov. Vzhľadom na to, že stehy a štylizované komponenty sú obe knižnice CSS-in-JS, ktoré vám umožňujú písať štýly v JavaScripte.

Pred úpravou štýlu aplikácie React si musíte nainštalovať a nastaviť knižnicu stehov. Ak chcete nainštalovať knižnicu pomocou npm, spustite v termináli nasledujúci príkaz:

npm install @stitches/react

Alternatívne môžete knižnicu nainštalovať pomocou priadze pomocou tohto príkazu:

yarn add @stitches/react

Po nainštalovaní knižnice stehov môžete začať upravovať svoju aplikáciu React.

Vytváranie štylizovaných komponentov

Na vytvorenie štylizovaných komponentov knižnica stehov poskytuje a

štylizované funkciu. Funkcia štýlu vám umožňuje vytvárať štylizované komponenty, ktoré kombinujú štýly CSS a logiku komponentov.

The štylizované funkcia má dva argumenty. Prvým je prvok HTML/JSX a druhým je objekt, ktorý obsahuje vlastnosti CSS na jeho úpravu.

Tu je návod, ako môžete vytvoriť štylizovaný komponent tlačidla pomocou štylizované funkcia:

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

Vyššie uvedený blok kódu vytvára a Tlačidlo komponent s tmavou farbou pozadia, sivou farbou textu, polomerom okraja a výplňou. Všimnite si, že vlastnosti CSS píšete v camelCase, nie kebab-case. Je to preto, že camelCase je bežnejší spôsob písania vlastností CSS v JavaScripte.

Po vytvorení štylizovaného komponentu tlačidla ho môžete importovať do komponentov React a použiť ho.

Napríklad:

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

Tento príklad používa Tlačidlo komponent v an App komponent. Tlačidlo prevezme štýly, ktoré ste odovzdali štylizované funkciu, takže to vyzerá takto:

The štylizované funkcia tiež umožňuje vnoriť štýly CSS s podobnou syntaxou ako jazyk rozšírenia SASS/SCSS. To vám uľahčí organizovanie štýlov a váš kód bude čitateľnejší.

Tu je príklad použitia techniky vnorených štýlov:

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

Tento kód používa vnorené štýly CSS a pseudotriedu na zacielenie Tlačidlo komponent. Keď umiestnite kurzor myši na tlačidlo, vnorený volič &:vznášať sa zmení farbu pozadia a textu tlačidla.

Úprava štýlu pomocou funkcie CSS

Ak je vám nepríjemné vytvárať štylizované komponenty, stehy knižnica ponúka css funkcia, ktorá dokáže generovať názvy tried na štýl vašich komponentov. The css funkcia berie ako jediný argument objekt JavaScript s vlastnosťami CSS.

Tu je návod, ako môžete upraviť svoje komponenty pomocou css funkcia:

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 vytvorí CSS štýly pre tlačidlo, ktoré potom tento kód priradí k buttonStyle premenlivý. The buttonStyle funkcia vygeneruje názov triedy pre definované štýly, ktorý sa potom odovzdá do className opora z tlačidlo komponent.

Vytváranie globálnych štýlov

Pomocou stehy knižnice, môžete tiež definovať globálne štýly pre vašu aplikáciu pomocou globalCss funkciu. Funkcia globalCss vytvára a aplikuje globálne štýly na vašu aplikáciu React.

Po definovaní globálnych štýlov pomocou globalCSS, zavolajte funkciu vo vašom aplikácie komponent na použitie štýlov vo vašej aplikácii.

Napríklad:

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

Tento príklad definuje štýly pre telo prvok pomocou globalCss funkciu. Hovor nastaví farbu pozadia na #f2f2f2 a farbu textu #333333.

Vytváranie dynamických štýlov

Jedna z najvýkonnejších funkcií stehy knižnica je jej schopnosť vytvárať dynamické štýly. Môžete vytvárať štýly, ktoré závisia od Reagovať rekvizity s varianty kľúč. The varianty kľúč je vlastnosťou oboch css a štylizované funkcie. Môžete vytvoriť toľko variantov vášho komponentu, koľko chcete.

Napríklad:

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

Tento kód vytvára a Tlačidlo komponent s a farba varianta. The farba variant umožňuje zmeniť farbu tlačidla na základe a farba rekvizita. Akonáhle ste vytvorili Tlačidlo komponent, môžete ho použiť vo svojej aplikácii.

Napríklad:

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

Po vykreslení tejto aplikácie sa na vašom rozhraní zobrazia dve tlačidlá. Tlačidlá budú vyzerať ako na obrázku nižšie.

Vytváranie žetónov tém

The stehy knižnica vám umožňuje vytvoriť sadu tokenov dizajnu, ktoré definujú vizuálne aspekty vášho používateľského rozhrania, ako sú farby, typografia, medzery a ďalšie. Tieto tokeny pomáhajú udržiavať konzistentnosť a zjednodušujú aktualizáciu celkových štýlov vašej aplikácie.

Ak chcete vytvoriť tieto tokeny tém, použite createStitches funkciu. The createStitches funkcia z knižnice stehov vám umožňuje konfigurovať knižnicu. Uistite sa, že používate createStitches funkcia v a stehy.config.ts súbor alebo a stitches.config.js súbor.

Tu je príklad, ako vytvoriť token témy:

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

Teraz, keď ste definovali svoje tokeny tém, môžete ich použiť vo svojich štýloch komponentov.

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

Vyššie uvedený blok kódu používa farebné žetóny $šedá a $čierna pre farbu pozadia a textu tlačidla. Používa tiež žetóny priestoru $1 a $3 na nastavenie výplne tlačidla a premennej veľkosti písma $1 na nastavenie veľkosti písma tlačidla.

Efektívny styling so stehmi

Knižnica stehov poskytuje výkonný a flexibilný spôsob úpravy vašich aplikácií React. Pomocou funkcií, ako sú štylizované komponenty, dynamické štýly a globalCSS, môžete jednoducho vytvárať zložité návrhy. Či už vytvárate malú alebo veľkú aplikáciu React, stehy môžu byť vynikajúcou voľbou pre styling.

Skvelou alternatívou ku knižnici stehov je knižnica emócií. Emotion je populárna knižnica CSS-in-JS, ktorá vám umožňuje písať štýly v JavaScripte. Ľahko sa používa a ponúka mnoho funkcií na vytváranie skvelých štýlov pre vašu aplikáciu.