Styling aplikace React pomocí stehů

Stitches je moderní knihovna CSS-in-JS, která poskytuje výkonný a flexibilní způsob úpravy vašich aplikací React. Nabízí jedinečný přístup ke stylování, který kombinuje nejlepší části CSS a JavaScriptu, což vám umožňuje snadno vytvářet dynamické styly.

Nastavení stehů

Styling aplikace React pomocí stehy je podobný pomocí knihovny styled-components. Vzhledem k tomu, že stehy a stylové komponenty jsou obě CSS-in-JS knihovny, které umožňují psát styly v JavaScriptu.

Před úpravou stylu aplikace React musíte nainstalovat a nastavit knihovnu stehů. Chcete-li nainstalovat knihovnu pomocí npm, spusťte ve svém terminálu následující příkaz:

npm install @stitches/react

Alternativně můžete knihovnu nainstalovat pomocí příze pomocí tohoto příkazu:

yarn add @stitches/react

Jakmile nainstalujete knihovnu stehů, můžete začít upravovat styl aplikace React.

Vytváření stylových komponent

Chcete-li vytvořit stylizované komponenty, knihovna stehů poskytuje a

stylizovaný funkce. Funkce stylování vám umožňuje vytvářet stylizované komponenty, které kombinují styly CSS a logiku komponent.

The stylizovaný funkce má dva argumenty. První je prvek HTML/JSX a druhý je objekt, který obsahuje vlastnosti CSS pro jeho styl.

Zde je návod, jak můžete vytvořit stylizovanou komponentu tlačítka pomocí stylizovaný funkce:

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

Blok kódu výše vytvoří a Knoflík komponenta s tmavou barvou pozadí, šedou barvou textu, poloměrem ohraničení a výplní. Všimněte si, že vlastnosti CSS zapisujete v camelCase, ne kebab-case. Je to proto, že camelCase je běžnější způsob psaní vlastností CSS v JavaScriptu.

Jakmile vytvoříte komponentu tlačítka se stylem, můžete ji importovat do komponent React a používat ji.

Například:

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

Tento příklad používá Knoflík součást v an Aplikace komponent. Tlačítko převezme styly, které jste předali stylizovaný funkce, takže to vypadá takto:

The stylizovaný funkce také umožňuje vnořit styly CSS s podobnou syntaxí jako jazyk rozšíření SASS/SCSS. Usnadní vám to uspořádání stylů a bude váš kód čitelnější.

Zde je příklad použití techniky vnořených stylů:

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žívá k cílení vnořené styly CSS a pseudotřídu Knoflík komponent. Když najedete na tlačítko, vnořený volič &:vznášet se změní barvu pozadí tlačítka a textu.

Stylování pomocí funkce CSS

Pokud je vám nepříjemné vytvářet stylizované komponenty, stehy knihovna nabízí css funkce, která může generovat názvy tříd pro stylování vašich komponent. The css funkce bere jako svůj jediný argument objekt JavaScriptu s vlastnostmi CSS.

Zde je návod, jak můžete stylizovat své komponenty pomocí css funkce:

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 funkce vytvoří styly CSS pro tlačítko, které pak tento kód přiřadí k styl tlačítka variabilní. The styl tlačítka funkce generuje název třídy pro definované styly, který je poté předán do jméno třídy podpěra toho knoflík komponent.

Vytváření globálních stylů

Za použití stehy knihovny, můžete také definovat globální styly pro vaši aplikaci pomocí globalCss funkce. Funkce globalCss vytváří a aplikuje globální styly na vaši aplikaci React.

Po definování vašich globálních stylů pomocí globalCSS, zavolejte funkci ve vašem aplikace pro aplikaci stylů na vaši aplikaci.

Například:

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

Tento příklad definuje styly pro tělo prvek pomocí globalCss funkce. Volání nastaví barvu pozadí na #f2f2f2 a barvu textu #333333.

Vytváření dynamických stylů

Jedna z nejvýkonnějších funkcí stehy Knihovna je její schopnost vytvářet dynamické styly. Můžete vytvářet styly, které závisí na Reagovat rekvizity s varianty klíč. The varianty klíč je vlastností obou css a stylizovaný funkcí. Můžete vytvořit tolik variant komponenty, kolik chcete.

Napří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áří a Knoflík složka s a barva varianta. The barva varianta umožňuje změnit barvu tlačítka na základě a barva podpěra. Jakmile vytvoříte Knoflík komponentu, můžete ji použít ve své aplikaci.

Například:

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

Po vykreslení této aplikace se na vašem rozhraní zobrazí dvě tlačítka. Tlačítka budou vypadat jako na obrázku níže.

Vytváření žetonů motivů

The stehy Knihovna umožňuje vytvořit sadu tokenů designu, které definují vizuální aspekty vašeho uživatelského rozhraní, jako jsou barvy, typografie, mezery a další. Tyto tokeny pomáhají udržovat konzistenci a usnadňují aktualizaci celkových stylů vaší aplikace.

Chcete-li vytvořit tyto tokeny motivů, použijte createStitches funkce. The createStitches funkce z knihovny stehů umožňuje konfigurovat knihovnu. Ujistěte se, že používáte createStitches funkce v a stehy.config.ts soubor nebo a stitches.config.js soubor.

Zde je příklad, jak vytvořit token tématu:

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

Nyní, když jste definovali své tokeny motivu, můžete je použít ve stylech komponent.

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

Blok kódu výše používá barevné tokeny $šedá a $černá pro barvu pozadí a textu tlačítka. Používá také žetony prostoru $1 a $3 pro nastavení odsazení tlačítka a proměnné velikosti písma $1 pro nastavení velikosti písma tlačítka.

Efektivní styling se stehy

Knihovna stehů poskytuje výkonný a flexibilní způsob úpravy vašich aplikací React. S funkcemi, jako jsou stylizované komponenty, dynamické styly a globalCSS, můžete snadno vytvářet složité návrhy. Ať už vytváříte malou nebo velkou aplikaci React, stehy mohou být vynikající volbou pro styling.

Skvělou alternativou ke knihovně stehů je knihovna emocí. Emotion je oblíbená knihovna CSS-in-JS, která umožňuje psát styly v JavaScriptu. Snadno se používá a nabízí mnoho funkcí pro vytváření skvělých stylů pro vaši aplikaci.