Стилизирање Реацт апликације помоћу шавова

Ститцхес је модерна ЦСС-ин-ЈС библиотека која пружа моћан и флексибилан начин за стилизовање ваших Реацт апликација. Нуди јединствен приступ стилу који комбинује најбоље делове ЦСС-а и ЈаваСцрипт-а, омогућавајући вам да лако креирате динамичке стилове.

Постављање шавова

Стилизирање ваше Реацт апликације помоћу шавове је сличан користећи библиотеку стилизованих компоненти. С обзиром на то да шавови и стилед-цомпонентс су обе ЦСС-ин-ЈС библиотеке које вам омогућавају да пишете стилове у ЈаваСцрипт-у.

Пре него што стилизујете своју Реацт апликацију, морате да инсталирате и подесите библиотеку шавова. Да бисте инсталирали библиотеку користећи нпм, покрените следећу команду у свом терминалу:

npm install @stitches/react

Алтернативно, можете инсталирати библиотеку користећи предиво са овом командом:

yarn add @stitches/react

Када инсталирате библиотеку шавова, можете почети са стилизовањем ваше Реацт апликације.

Креирање стилизованих компоненти

Да бисте креирали стилизоване компоненте, библиотека шавова пружа а стилизовано функција. Функција стилизовања вам омогућава да креирате стилизоване компоненте које комбинују ЦСС стилове и логику компоненти.

Тхе стилизовано функција узима два аргумента. Први је ХТМЛ/ЈСКС елемент, а други је објекат који садржи ЦСС својства за стилизовање.

Ево како можете да креирате стилизовану компоненту дугмета користећи стилизовано функција:

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

Горњи блок кода ствара а Дугме компонента са тамном бојом позадине, сивом бојом текста, радијусом ивице и неким допунама. Имајте на уму да ЦСС својства пишете у цамелЦасе, а не кебаб-цасе. То је зато што је цамелЦасе чешћи начин писања ЦСС својстава у ЈаваСцрипт-у.

Када креирате компоненту стилизованог дугмета, можете је увести у своје Реацт компоненте и користити је.

На пример:

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

Овај пример користи Дугме компонента у ан Апликација саставни део. Дугме ће усвојити стилове које сте пренели стилизовано функцију, чинећи да изгледа овако:

Тхе стилизовано функција вам такође омогућава да угнездите ЦСС стилове, са сличном синтаксом као језик проширења САСС/СЦСС. Ово вам олакшава да организујете своје стилове и учините свој код читљивијим.

Ево примера који користи технику угнежђених стилова:

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

Овај код користи угнежђене ЦСС стилове и псеудо-класу за циљање Дугме саставни део. Када пређете мишем преко дугмета, угнежђени бирач &:лебдети мења боју позадине и текста дугмета.

Стилизирање помоћу ЦСС функције

Ако вам је непријатно да креирате стилизоване компоненте, шавове библиотека нуди цсс функција, која може да генерише имена класа за стилизовање ваших компоненти. Тхе цсс функција узима ЈаваСцрипт објекат са ЦСС својствима као једини аргумент.

Ево како можете да стилизујете своје компоненте користећи цсс функција:

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;

Тхе цсс функција креира ЦСС стилове за дугме које овај код затим додељује буттонСтиле променљива. Тхе буттонСтиле функција генерише име класе за дефинисане стилове, које се затим прослеђује у Назив класе проп оф тхе дугме саставни део.

Креирање глобалних стилова

Помоћу шавове библиотеци, такође можете дефинисати глобалне стилове за своју апликацију користећи глобалЦсс функција. Функција глобалЦсс креира и примењује глобалне стилове на вашу Реацт апликацију.

Након што дефинишете своје глобалне стилове користећи глобалЦСС, позовите функцију у свом апликација компоненту за примену стилова на вашу апликацију.

На пример:

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

Овај пример дефинише стилове за тело елемент користећи глобалЦсс функција. Позив поставља боју позадине на #ф2ф2ф2 и боју текста до #333333.

Креирање динамичких стилова

Једна од моћнијих карактеристика шавове библиотека је њена способност да креира динамичке стилове. Можете креирати стилове који зависе од Реацт пропс са варијанти кључ. Тхе варијанти кључ је својство оба цсс и стилизовано функције. Можете креирати онолико варијанти своје компоненте колико желите.

На пример:

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

Овај код ствара а Дугме компонента са а боја варијанта. Тхе боја варијанта вам омогућава да промените боју дугмета на основу а боја проп. Након што сте креирали Дугме компоненту, можете је користити у својој апликацији.

На пример:

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

Једном када рендерујете ову апликацију, два дугмета ће се приказати на вашем интерфејсу. Дугмад ће изгледати као на слици испод.

Креирање токена тема

Тхе шавове библиотека вам омогућава да креирате скуп дизајнерских токена који дефинишу визуелне аспекте вашег корисничког интерфејса, као што су боје, типографија, размаци и још много тога. Ови токени помажу у одржавању доследности и чине да ажурирање општих стилова ваше апликације изгледа лако.

Да бисте креирали ове токене теме, користите цреатеСтитцхес функција. Тхе цреатеСтитцхес функција из библиотеке шавова омогућава вам да конфигуришете библиотеку. Обавезно користите цреатеСтитцхес функција у а ститцхес.цонфиг.тс фајл или а ститцхес.цонфиг.јс фајл.

Ево примера како да направите токен теме:

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

Сада када сте дефинисали своје токене теме, можете их користити у својим стиловима компоненти.

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

Блок кода изнад користи ознаке боја $греи и $блацк за боју позадине и текста дугмета. Такође користи просторне токене $1 и $3 да бисте подесили допуну дугмета и променљиву величине фонта $1 да бисте подесили величину фонта дугмета.

Ефикасно обликовање са шавовима

Библиотека шавова пружа моћан и флексибилан начин за стилизовање ваших Реацт апликација. Са функцијама као што су стилизоване компоненте, динамички стилови и глобалЦСС, можете лако да креирате сложене дизајне. Без обзира да ли правите малу или велику Реацт апликацију, шавови могу бити одличан избор за стилизовање.

Одлична алтернатива библиотеци шавова је библиотека емоција. Емотион је популарна ЦСС-ин-ЈС библиотека која вам омогућава да пишете стилове у ЈаваСцрипт-у. Једноставан је за употребу и нуди многе функције за креирање сјајних стилова за вашу апликацију.