Stylizowanie aplikacji React za pomocą ściegów

Stitches to nowoczesna biblioteka CSS-in-JS, która zapewnia potężny i elastyczny sposób stylizowania aplikacji React. Oferuje unikalne podejście do stylizacji, które łączy w sobie najlepsze części CSS i JavaScript, umożliwiając łatwe tworzenie dynamicznych stylów.

Konfigurowanie ściegów

Stylizowanie aplikacji React za pomocą szwy jest podobne do przy użyciu biblioteki styled-components. Biorąc pod uwagę, że szwy i komponenty stylizowane to obie biblioteki CSS-in-JS, które umożliwiają pisanie stylów w JavaScript.

Przed stylizacją aplikacji React musisz zainstalować i skonfigurować bibliotekę ściegów. Aby zainstalować bibliotekę za pomocą npm, uruchom następującą komendę w terminalu:

npm install @stitches/react

Alternatywnie możesz zainstalować bibliotekę za pomocą przędzy za pomocą tego polecenia:

yarn add @stitches/react

Po zainstalowaniu biblioteki ściegów możesz rozpocząć stylizację aplikacji React.

Tworzenie stylizowanych komponentów

Biblioteka ściegów umożliwia tworzenie stylizowanych komponentów stylizowany funkcjonować. Funkcja styled umożliwia tworzenie stylizowanych komponentów, które łączą style CSS i logikę komponentów.

The stylizowany funkcja przyjmuje dwa argumenty. Pierwszy to element HTML/JSX, a drugi to obiekt zawierający właściwości CSS umożliwiające jego stylizację.

Oto jak można utworzyć stylizowany komponent przycisku za pomocą stylizowany funkcjonować:

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

Powyższy blok kodu tworzy plik Przycisk komponent z ciemnym kolorem tła, szarym kolorem tekstu, promieniem obramowania i pewnym wypełnieniem. Pamiętaj, że właściwości CSS piszesz w camelCase, a nie w kebab-case. Dzieje się tak, ponieważ camelCase jest bardziej powszechnym sposobem pisania właściwości CSS w JavaScript.

Po utworzeniu stylizowanego komponentu przycisku możesz go zaimportować do swoich komponentów React i używać go.

Na przykład:

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

W tym przykładzie zastosowano Przycisk składnik w Aplikacja część. Przycisk przyjmie style przekazane do stylizowany funkcję, dzięki czemu będzie wyglądać tak:

The stylizowany Funkcja umożliwia także zagnieżdżanie stylów CSS, z podobną składnią do język rozszerzenia SASS/SCSS. Ułatwia to organizację stylów i zwiększa czytelność kodu.

Oto przykład użycia techniki stylów zagnieżdżonych:

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

Ten kod używa zagnieżdżonych stylów CSS i pseudoklasy do kierowania na Przycisk część. Po najechaniu kursorem na przycisk zagnieżdżony selektor &:unosić się zmienia tło przycisku i kolory tekstu.

Stylizacja za pomocą funkcji CSS

Jeśli nie czujesz się komfortowo tworząc stylizowane komponenty, szwy biblioteka oferuje css funkcję, która może generować nazwy klas w celu nadania stylu komponentom. The css Funkcja przyjmuje jako jedyny argument obiekt JavaScript z właściwościami CSS.

Oto jak możesz stylizować swoje komponenty za pomocą css funkcjonować:

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 Funkcja tworzy style CSS dla przycisku, które ten kod następnie przypisuje do przyciskStyl zmienny. The przyciskStyl Funkcja generuje nazwę klasy dla zdefiniowanych stylów, która jest następnie przekazywana do Nazwa klasy podpora przycisk część.

Tworzenie stylów globalnych

Używając szwy bibliotekę, możesz także zdefiniować globalne style dla swojej aplikacji za pomocą globalCss funkcjonować. Funkcja globalCss tworzy i stosuje globalne style w aplikacji React.

Po zdefiniowaniu stylów globalnych za pomocą globalny CSS, wywołaj funkcję w pliku aplikacja komponent, aby zastosować style do aplikacji.

Na przykład:

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

W tym przykładzie zdefiniowano style dla pliku ciało element za pomocą globalCss funkcjonować. Wywołanie ustawia kolor tła na #f2f2f2 i kolor tekstu #333333.

Tworzenie stylów dynamicznych

Jedna z najpotężniejszych funkcji programu szwy biblioteka to jej zdolność do tworzenia stylów dynamicznych. Możesz tworzyć style zależne od Reaguj na rekwizyty z warianty klucz. The warianty klucz jest właściwością obu css I stylizowany Funkcje. Możesz utworzyć dowolną liczbę wariantów swojego komponentu.

Na przykład:

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

Ten kod tworzy Przycisk składnik z A kolor wariant. The kolor wariant pozwala na zmianę koloru przycisku na podstawie a kolor rekwizyt. Po utworzeniu Przycisk komponent, możesz go użyć w swojej aplikacji.

Na przykład:

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

Po wyrenderowaniu tej aplikacji w interfejsie zostaną wyświetlone dwa przyciski. Przyciski będą wyglądać jak na obrazku poniżej.

Tworzenie tokenów tematycznych

The szwy Biblioteka umożliwia utworzenie zestawu tokenów projektowych, które definiują wizualne aspekty interfejsu użytkownika, takie jak kolory, typografia, odstępy i inne. Tokeny te pomagają zachować spójność i sprawiają, że aktualizowanie ogólnych stylów aplikacji wygląda na łatwe.

Aby utworzyć te tokeny motywu, użyj utwórz ściegi funkcjonować. The utwórz ściegi Funkcja z biblioteki ściegów pozwala na konfigurację biblioteki. Upewnij się, że używasz utwórz ściegi funkcjonować w A ściegi.config.ts plik lub a Stitches.config.js plik.

Oto przykład tworzenia tokena motywu:

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, gdy zdefiniowałeś tokeny motywu, możesz ich używać w stylach komponentów.

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

Powyższy blok kodu wykorzystuje tokeny kolorów $szary I $czarny dla tła i koloru tekstu przycisku. Wykorzystuje także żetony przestrzeni $1 I $3 aby ustawić dopełnienie przycisku i zmienną rozmiaru czcionki $1 aby ustawić rozmiar czcionki przycisku.

Efektowna stylizacja ze szwami

Biblioteka ściegów zapewnia potężny i elastyczny sposób stylizowania aplikacji React. Dzięki funkcjom takim jak stylizowane komponenty, style dynamiczne i globalCSS możesz łatwo tworzyć złożone projekty. Niezależnie od tego, czy tworzysz małą, czy dużą aplikację React, ściegi mogą być doskonałym wyborem do stylizacji.

Świetną alternatywą dla biblioteki ściegów jest biblioteka emocji. Emotion to popularna biblioteka CSS-in-JS, która umożliwia pisanie stylów w JavaScript. Jest łatwy w użyciu i oferuje wiele funkcji do tworzenia świetnych stylów dla Twojej aplikacji.