React alkalmazás stílusa öltésekkel

A Stitches egy modern CSS-in-JS könyvtár, amely hatékony és rugalmas módot biztosít a React-alkalmazások stílusának meghatározására. Egyedülálló megközelítést kínál a stílushoz, amely egyesíti a CSS és a JavaScript legjobb részeit, lehetővé téve a dinamikus stílusok egyszerű létrehozását.

Öltések beállítása

A React alkalmazás stílusa a segítségével öltések hasonló a stílusos összetevők könyvtárának használatával. Tekintettel arra, hogy öltések és stílusos komponensek mindkettő CSS-in-JS könyvtár, amely lehetővé teszi stílusok írását JavaScriptben.

A React alkalmazás stílusának kialakítása előtt telepítenie és be kell állítania az öltéskönyvtárat. A könyvtár npm használatával történő telepítéséhez futtassa a következő parancsot a terminálon:

npm install @stitches/react

Alternatív megoldásként telepítheti a könyvtárat a yarn használatával ezzel a paranccsal:

yarn add @stitches/react

Miután telepítette az öltéskönyvtárat, megkezdheti a React alkalmazás stílusának kialakítását.

Stílusos komponensek létrehozása

Stílusos komponensek létrehozásához az öltéskönyvtár a stílusú funkció. A stílusos funkció lehetővé teszi olyan stílusos összetevők létrehozását, amelyek kombinálják a CSS stílusokat és az összetevők logikáját.

A stílusú függvény két argumentumot vesz fel. Az első egy HTML/JSX elem, a második pedig egy objektum, amely tartalmazza a stílus kialakításához szükséges CSS-tulajdonságokat.

Így hozhat létre stílusos gombösszetevőt a stílusú funkció:

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

A fenti kódblokk létrehozza a Gomb komponens sötét háttérszínnel, szürke szövegszínnel, szegélysugárral és némi kitöltéssel. Vegye figyelembe, hogy a CSS-tulajdonságokat camelCase-ben írja be, nem kebab-case-ben. Ennek az az oka, hogy a camelCase egy gyakoribb módja a CSS-tulajdonságok írásának JavaScriptben.

Miután létrehozta a stílusos gombkomponenst, importálhatja azt a React összetevőkbe, és használhatja.

Például:

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

Ez a példa a Gomb komponens egy App összetevő. A gomb átveszi a számára átadott stílusokat stílusú függvényt, így néz ki:

A stílusú A funkció lehetővé teszi CSS-stílusok egymásba ágyazását is, hasonló szintaxissal a SASS/SCSS kiterjesztési nyelv. Ez megkönnyíti a stílusok rendszerezését és a kód olvashatóbbá tételét.

Íme egy példa a beágyazott stílusok technikájára:

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

Ez a kód beágyazott CSS-stílusokat és pszeudoosztályt használ a célzáshoz Gomb összetevő. Ha az egérmutatót a gomb fölé viszi, a beágyazott választó &:lebeg megváltoztatja a gomb háttér- és szövegszínét.

Styling a CSS funkcióval

Ha kényelmetlenül érzi magát stílusos komponensek létrehozásában, a öltések könyvtár kínálja a css függvény, amely osztályneveket generálhat az összetevők stílusához. A css függvény olyan JavaScript objektumot vesz fel, amelynek egyetlen argumentuma a CSS tulajdonságai.

A következőképpen alakíthatja ki összetevőit a css funkció:

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;

A css funkció létrehozza a gombhoz tartozó CSS-stílusokat, amelyeket ez a kód azután hozzárendel a gombhoz gombStyle változó. A gombStyle függvény létrehoz egy osztálynevet a definiált stílusokhoz, amelyet ezután ad át a osztály név kelléke a gomb összetevő.

Globális stílusok létrehozása

Használni a öltések könyvtárban globális stílusokat is meghatározhat az alkalmazáshoz a globalCss funkció. A globalCss függvény globális stílusokat hoz létre és alkalmaz a React alkalmazásban.

Miután meghatározta a globális stílusokat a segítségével globalCSS, hívja meg a függvényt kb összetevőt a stílusok alkalmazásához.

Például:

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

Ez a példa a stílusokat határozza meg a test elem segítségével globalCss funkció. A hívás beállítja a háttérszínt #f2f2f2 és a szöveg színét #333333.

Dinamikus stílusok létrehozása

Az egyik legerősebb tulajdonsága a öltések A könyvtár dinamikus stílusok létrehozásának képessége. Létrehozhat olyan stílusokat, amelyek attól függnek React kellékek a... val változatai kulcs. A változatai kulcs mind a tulajdonsága css és stílusú funkciókat. Alkatrészének tetszőleges számú változatát létrehozhatja.

Például:

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

Ez a kód létrehozza a Gomb komponens a szín változat. A szín változat lehetővé teszi a gomb színének megváltoztatását a alapján szín támaszt. Miután létrehozta a Gomb összetevőt, használhatja az alkalmazásában.

Például:

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

Az alkalmazás megjelenítése után két gomb jelenik meg a felületen. A gombok úgy néznek ki, mint az alábbi képen.

Téma tokenek létrehozása

A öltések A könyvtár lehetővé teszi olyan tervezési tokenek létrehozását, amelyek meghatározzák a felhasználói felület vizuális aspektusait, például a színeket, a tipográfiát, a térközöket és egyebeket. Ezek a tokenek segítenek fenntartani a konzisztenciát, és megkönnyítik az alkalmazás általános stílusának frissítését.

A téma tokenek létrehozásához használja a öltések létrehozása funkció. A öltések létrehozása Az öltéskönyvtár funkciója lehetővé teszi a könyvtár konfigurálását. Feltétlenül használja a öltések létrehozása funkció a öltések.config.ts fájl vagy a stitches.config.js fájlt.

Íme egy példa a téma token létrehozására:

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

Most, hogy meghatározta a témajogkivonatokat, használhatja őket összetevőstílusaiban.

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

A fenti kódblokk a színjeleket használja $szürke és $fekete a gomb háttér- és szövegszínéhez. A térjelzőket is használja $1 és $3 a gomb kitöltésének és a betűméret változójának beállításához $1 a gomb betűméretének beállításához.

Hatékony formázás öltésekkel

Az öltéskönyvtár hatékony és rugalmas módot biztosít React alkalmazásai stílusának kialakítására. Az olyan funkciókkal, mint a stílusos összetevők, a dinamikus stílusok és a globalCSS, könnyedén hozhat létre összetett terveket. Akár kicsi, akár nagy React alkalmazást épít, az öltések kiváló választást jelenthetnek a formázáshoz.

Az öltéskönyvtár nagyszerű alternatívája az érzelemkönyvtár. Az Emotion egy népszerű CSS-in-JS könyvtár, amely lehetővé teszi stílusok írását JavaScriptben. Könnyen használható, és számos funkciót kínál nagyszerű stílusok létrehozásához az alkalmazáshoz.