Оформяне на React приложение с шевове

Stitches е модерна CSS-in-JS библиотека, която предоставя мощен и гъвкав начин за стилизиране на вашите React приложения. Той предлага уникален подход към стилизирането, който комбинира най-добрите части на CSS и JavaScript, което ви позволява лесно да създавате динамични стилове.

Настройване на шевове

Стилизиране на вашето приложение React с помощта на шевове е подобен на използвайки библиотеката със стилизирани компоненти. Имайки предвид, че шевове и стилизирани компоненти и двете са CSS-in-JS библиотеки, които ви позволяват да пишете стилове в JavaScript.

Преди да оформите вашето React приложение, трябва да инсталирате и настроите библиотеката със шевове. За да инсталирате библиотеката с помощта на npm, изпълнете следната команда във вашия терминал:

npm install @stitches/react

Като алтернатива можете да инсталирате библиотеката с помощта на yarn с тази команда:

yarn add @stitches/react

След като инсталирате библиотеката със шевове, можете да започнете да оформяте своето React приложение.

Създаване на стилизирани компоненти

За да създадете стилизирани компоненти, библиотеката със шевове предоставя a стилизиран функция. Стилизираната функция ви позволява да създавате стилизирани компоненти, които комбинират CSS стилове и логиката на компонентите.

The стилизиран функцията приема два аргумента. Първият е HTML/JSX елемент, а вторият е обект, който съдържа CSS свойствата за стилизирането му.

Ето как можете да създадете стилизиран компонент на бутон, като използвате стилизиран функция:

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 Бутон компонент с тъмен цвят на фона, сив цвят на текста, радиус на границата и малко подложка. Имайте предвид, че пишете свойствата на CSS в camelCase, а не в kebab-case. Това е така, защото camelCase е по-често срещан начин за писане на CSS свойства в JavaScript.

След като създадете стилизирания компонент на бутона, можете да го импортирате във вашите React компоненти и да го използвате.

Например:

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

Този пример използва Бутон компонент в an Приложение компонент. Бутонът ще приеме стиловете, които сте предали на стилизиран функция, правейки я да изглежда така:

The стилизиран функцията също ви позволява да влагате CSS стилове със синтаксис, подобен на езика за разширение SASS/SCSS. Това ви улеснява да организирате вашите стилове и да направите кода си по-четлив.

Ето пример, използващ техниката на вложени стилове:

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

Този код използва вложени CSS стилове и псевдоклас за насочване към Бутон компонент. Когато задържите курсора на мишката върху бутона, вложеният селектор &:задръжте променя цвета на фона и текста на бутона.

Оформяне с CSS функцията

Ако се чувствате неудобно да създавате стилизирани компоненти, шевове библиотеката предлага css функция, която може да генерира имена на класове за стилизиране на вашите компоненти. The css функцията приема обект на JavaScript със свойства на CSS като единствен аргумент.

Ето как можете да стилизирате вашите компоненти с помощта на css функция:

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 създава CSS стилове за бутона, който след това този код присвоява на buttonStyle променлива. The buttonStyle функцията генерира име на клас за дефинираните стилове, което след това се предава на className опора на бутон компонент.

Създаване на глобални стилове

Използвайки шевове библиотека, можете също да дефинирате глобални стилове за вашето приложение, като използвате globalCss функция. Функцията globalCss създава и прилага глобални стилове към вашето React приложение.

След като дефинирате вашите глобални стилове с помощта на globalCSS, извикайте функцията във вашия ап компонент за прилагане на стиловете към вашето приложение.

Например:

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

Този пример дефинира стиловете за тяло елемент с помощта на globalCss функция. Повикването задава цвета на фона на #f2f2f2 и цвета на текста към #333333.

Създаване на динамични стилове

Една от най-мощните характеристики на шевове библиотека е способността му да създава динамични стилове. Можете да създавате стилове, които зависят от React подпори с варианти ключ. The варианти ключът е свойство и на двете css и стилизиран функции. Можете да създадете толкова варианти на вашия компонент, колкото искате.

Например:

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

Този код създава a Бутон компонент с a цвят вариант. The цвят вариант ви позволява да промените цвета на бутона въз основа на a цвят опора След като сте създали Бутон компонент, можете да го използвате във вашето приложение.

Например:

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

След като изобразите това приложение, на интерфейса ви ще се покажат два бутона. Бутоните ще изглеждат като изображението по-долу.

Създаване на тематични токени

The шевове библиотека ви позволява да създадете набор от дизайнерски токени, които определят визуалните аспекти на вашия потребителски интерфейс, като цветове, типография, интервали и др. Тези токени помагат за поддържане на последователност и правят актуализирането на цялостните стилове на вашето приложение да изглежда лесно.

За да създадете тези тематични символи, използвайте createStitches функция. The createStitches функция от библиотеката на шевовете ви позволява да конфигурирате библиотеката. Уверете се, че използвате createStitches функция в a stitches.config.ts файл или a stitches.config.js файл.

Ето пример за това как да създадете означение на тема:

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 за да зададете размера на шрифта на бутона.

Ефективно оформяне с шевове

Библиотеката със шевове предоставя мощен и гъвкав начин за стилизиране на вашите React приложения. С функции като стилизирани компоненти, динамични стилове и globalCSS можете лесно да създавате сложни дизайни. Независимо дали създавате малко или голямо React приложение, шевовете могат да бъдат отличен избор за стилизиране.

Чудесна алтернатива на библиотеката с шевове е библиотеката с емоции. Emotion е популярна CSS-in-JS библиотека, която ви позволява да пишете стилове в JavaScript. Той е лесен за използване и предлага много функции за създаване на страхотни стилове за вашето приложение.