Stylizowanie aplikacji React za pomocą Stitches

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 najlepsze części CSS i JavaScript, umożliwiając łatwe tworzenie dynamicznych stylów.

Konfigurowanie biblioteki Stitches

Wykorzystanie biblioteki Stitches do stylizowania aplikacji React jest porównywalne z wykorzystaniem biblioteki Styled Components, ponieważ oba te rozwiązania to CSS-in-JavaScript, które umożliwiają tworzenie stylów za pomocą kodu JavaScript.

Aby stylizować aplikację React, należy najpierw zainstalować i skonfigurować bibliotekę Stitches. Proces instalacji można przeprowadzić za pomocą terminala, uruchamiając następujące polecenie przy użyciu npm:

 npm install @stitches/react

Alternatywnie można zdecydować się na instalację biblioteki przy użyciu Yarn, wykonując następujące polecenie:

 yarn add @stitches/react

Po zainstalowaniu biblioteki “stitches” można przystąpić do dopracowywania estetyki swojej aplikacji React.

Tworzenie stylizowanych komponentów

W celu generowania ozdobnych elementów, Stitches oferuje metodę stylizacji znaną jako funkcja “styled”. To innowacyjne podejście łączy zastosowanie zasad projektowania wizualnego i nieodłączną funkcjonalność komponentów w ramach ujednoliconych ram.

Funkcja styled przyjmuje dwa parametry; początkowym parametrem jest znacznik lub komponent JSX, a kolejnym parametrem jest obiekt zawierający specyfikacje CSS wymagane do renderowania tego komponentu z atrakcyjnością wizualną.

Z pewnością, oto przykład tworzenia stylizowanego komponentu przycisku wykorzystującego funkcję styled w TypeScript:

 import { styled } from "@stitches/react";

export const Button = styled("button", {
  padding: "0.7rem 0.8rem",
  borderRadius: "12px",
  backgroundColor: "#333333",
  color: "#e2e2e2",
  fontFamily: "cursive",
  border: "none",
});

Podany kod generuje element Button z ponurym odcieniem tła, wyciszonym tonem tekstu, zaokrąglonymi rogami i dużą ilością białej przestrzeni wokół jego zawartości. Ważne jest, aby pamiętać, że podczas określania stylów CSS za pomocą JavaScript, zwyczajowo stosuje się formatowanie camelCase zamiast konwencjonalnie stosowanej notacji kebab-case, ponieważ jest to zgodne z powszechnymi konwencjami stylizacji w kontekście języka.

Po stworzeniu dopracowanego elementu przycisku, można wprowadzić go do swoich komponentów Reacta w celu integracji z różnymi aplikacjami.

Na przykład:

 import React from "react";
import { Button } from "./Button";

function App() {
  return (
    <>
      <Button>Click Me</Button>
    </>
  );
}

export default App;

Podany przykład wykorzystuje komponent Button w komponencie App .Przycisk będzie zgodny ze stylami określonymi przez funkcję styled , co spowoduje następujący wygląd wizualny:

Funkcja styled pozwala na włączenie zagnieżdżonych stylów CSS poprzez swoją składnię, która bardzo przypomina składnię języka rozszerzeń Sass/Scss. Funkcja ta umożliwia użytkownikom lepsze uporządkowanie stylów przy jednoczesnej poprawie czytelności kodu.

Wykorzystując podejście stylu zagnieżdżonego, rozważ poniższą ilustrację:

 import { styled } from "@stitches/react";

export const Button = styled("button", {
  padding: "0.7rem 0.8rem",
  borderRadius: "12px",
  backgroundColor: "#333333",
  color: "#e2e2e2",
  fontFamily: "cursive",
  border: "none",

  "&:hover": {
    backgroundColor: "#e2e2e2",
    color: "#333333",
  },
});

Podany kod wykorzystuje dołączone kaskadowe arkusze stylów (CSS) i pseudoklasę w celu określenia wyglądu elementu Button. Po umieszczeniu kursora nad przyciskiem selektor warunkowy &:hover modyfikuje kolor tła, a także kolor tekstu wspomnianego elementu.

Stylizacja za pomocą funkcji CSS

Biblioteka Stitches zapewnia alternatywną metodę dla tych, którzy mogą odczuwać dyskomfort podczas tworzenia stylizowanych komponentów poprzez implementację funkcji CSS. Funkcja ta jest w stanie generować nazwy klas, które ułatwiają proces stylizacji, akceptując obiekt JavaScript zawierający wyłącznie specyfikacje właściwości CSS jako dane wejściowe.

Włączenie stylizacji CSS do tej aplikacji JavaScript można osiągnąć za pomocą funkcji css , która pozwala na implementację niestandardowych stylów w celu poprawy wyglądu i komfortu użytkowania komponentów.

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

function App() {
  return (
    <>
      <button className={buttonStyle()}>Click Me</button>
    </>
  );
}

export default App;

Warstwa prezentacyjna wykorzystuje szereg reguł i wytycznych stylistycznych w celu wizualizacji interaktywności elementów aplikacji. Wytyczne te są zawarte w obiekcie buttonStyles , w którym definiują różne aspekty, takie jak kolor, rozmiar, odstępy, wyrównanie i inne właściwości projektowe, które przyczyniają się do tworzenia intuicyjnego i atrakcyjnego wizualnie interfejsu użytkownika. Stosując te parametry stylizacji, system zapewnia, że każdy element jest zgodny z jednolitym językiem wizualnym, zwiększając ogólną spójność i użyteczność w różnych komponentach i kontekstach.

Tworzenie globalnych stylów

Korzystając z biblioteki Stitches, można ustanowić uniwersalne motywy projektowe w całej aplikacji opartej na React, wykorzystując funkcję globalCss. Funkcja ta konstruuje i implementuje wszechobecne elementy stylistyczne, które nadają spójny motyw wizualny wszystkim komponentom aplikacji.

Po ustaleniu uniwersalnych zasad projektowania przy użyciu globalCSS , konieczne jest wdrożenie tych wytycznych w całej aplikacji poprzez wywołanie odpowiedniej funkcji w wybranym komponencie aplikacji . Zapewni to, że wszystkie elementy będą zgodne ze spójnym językiem wizualnym i doświadczeniem użytkownika, które starannie opracowałeś.

Na przykład:

 import React from "react";
import { globalCss } from "@stitches/react";

const globalStyles = globalCss({
  body: { backgroundColor: "#f2f2f2", color: "#333333" },
});

function App() {
  globalStyles();

  return <></>;
}

export default App;

Podany fragment kodu demonstruje zastosowanie funkcji globalCss , która jest wykorzystywana do definiowania właściwości stylistycznych związanych z elementem body HTML. W szczególności, to konkretne wywołanie funkcji globalCss ustanawia jasny szaro-niebieski (#f2f2f2) jako odcień tła i ciemniejszy odcień szarości (#333333) jako kolor tekstu dla wspomnianego elementu.

Tworzenie dynamicznych stylów

Biblioteka Stitches oferuje imponującą możliwość znaną jako tworzenie dynamicznych stylów, która pozwala na generowanie stylów zależnych od rekwizytów React wykorzystujących klucz variants . Klucz ten służy jako właściwość zarówno dla CSS, jak i stylizowanych funkcji, umożliwiając tworzenie wielu odmian własnych komponentów.

Na przykład:

 import { styled } from "@stitches/react";

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

Podany fragment kodu generuje niestandardowy element Button z charakterystycznym odcieniem pochodzącym z określonej właściwości koloru. Po utworzeniu ten efektowny wizualnie i wszechstronny komponent Button jest gotowy do integracji z różnymi aplikacjami.

Na przykład:

 import React from "react";
import { Button } from "./Button";

function App() {
  return (
    <>
      <Button color="gray">Click Me</Button>
      <Button color="black">Click Me</Button>
    </>
  );
}

export default App;

Po wyrenderowaniu wspomnianej aplikacji, powinna ona wygenerować interfejs użytkownika zawierający dwa wizualnie przedstawione elementy przypominające załączoną reprezentację graficzną.

Tworzenie tokenów tematycznych

Biblioteka Stitches umożliwia programistom tworzenie kolekcji elementów projektu znanych jako “tokeny projektu”, które obejmują różne właściwości wizualne interfejsu użytkownika, w tym schematy kolorów, kroje pisma, odstępy między znakami i inne atrybuty graficzne. Wdrażając te tokeny, można zapewnić jednolitość w całej aplikacji, jednocześnie ułatwiając dostosowanie jej ogólnego wyglądu.

Aby wygenerować te tokeny tematyczne, należy użyć funkcji createStitches dostępnej w bibliotece stitches .Funkcja ta umożliwia dostosowanie zachowania biblioteki i powinna być wywoływana w pliku ./stitches.config.ts lub ./stitches.config.js .

Oto ilustracja przedstawiająca proces generowania tokenu tematycznego, który może być wykorzystywany w różnych aplikacjach, takich jak przetwarzanie języka naturalnego i analiza nastrojów:

 import { createStitches } from "@stitches/react";

export const { styled, css } = createStitches({
  theme: {
    colors: {
      gray: "#e2e2e2",
      black: "#333333",
    },
    space: {
      1: "5px",
      2: "10px",
      3: "15px",
    },
    fontSizes: {
      1: "12px",
      2: "13px",
      3: "15px",
    },
  },
});

Po zdefiniowaniu tokenów tematycznych ich wykorzystanie jest teraz możliwe w kontekście stylizacji komponentów.

 import { styled } from "../stitches.config.js";

export const Button = styled("button", {
  padding: "$1 $3",
  borderRadius: "12px",
  fontSize: "$1",
  border: "none",
  color: '$black',
  backgroundColor: '$gray',
});

Powyższy kod wykorzystuje tokeny kolorów $gray i $black do zarządzania kolorami tła i treści tekstowej przycisku, a także wykorzystuje tokeny odstępów $ 1 i $ 3 do określenia wypełnienia przycisku, jednocześnie polegając na zmiennej rozmiaru czcionki $ 1 w celu ustalenia rozmiaru czcionki przycisku.

Efektywna stylizacja za pomocą Stitches

Stitches to wysoce wydajna biblioteka, która oferuje solidne i elastyczne rozwiązanie do ulepszania wyglądu aplikacji React. Oferując zaawansowane możliwości, takie jak stylizowane komponenty, regulowane style i globalny CSS, ułatwia tworzenie skomplikowanych elementów projektu z łatwością. Niezależnie od tego, czy tworzysz niewielki, czy rozbudowany projekt React, Stitches prezentuje się jako potężna opcja, jeśli chodzi o preferencje stylistyczne.

Doskonałym zamiennikiem dla biblioteki Stitches jest biblioteka Emotion, która jest szeroko stosowanym rozwiązaniem CSS-in-JS umożliwiającym tworzenie stylizacji za pomocą JavaScript. Jej prostota i wszechstronność sprawiają, że jest to atrakcyjny wybór do tworzenia imponujących elementów projektu w aplikacjach.