Styling av en React-applikasjon med sting

Stitches er et moderne CSS-in-JS-bibliotek som gir en kraftig og fleksibel måte å style React-applikasjonene dine på. Den tilbyr en unik tilnærming til styling som kombinerer de beste delene av CSS og JavaScript, slik at du enkelt kan lage dynamiske stiler.

Sette opp sømmer

Styler React-applikasjonen din ved å bruke sting den er lik ved å bruke biblioteket med stylede komponenter. Med tanke på at masker og stilede komponenter er begge CSS-i-JS-biblioteker som lar deg skrive stiler i JavaScript.

Før du styler React-applikasjonen din, må du installere og sette opp stitches-biblioteket. For å installere biblioteket ved hjelp av npm, kjør følgende kommando i terminalen din:

npm install @stitches/react

Alternativt kan du installere biblioteket ved hjelp av garn med denne kommandoen:

yarn add @stitches/react

Når du har installert stitches-biblioteket, kan du begynne å style React-applikasjonen.

Opprette stilede komponenter

For å lage stilede komponenter gir sømbiblioteket en

stylet funksjon. Den stylede funksjonen lar deg lage stylede komponenter som kombinerer CSS-stiler og logikken til komponenter.

De stylet funksjonen tar to argumenter. Det første er et HTML/JSX-element, og det andre er et objekt som inneholder CSS-egenskapene for å style det.

Her er hvordan du kan lage en stylet knappkomponent ved å bruke stylet funksjon:

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

Kodeblokken ovenfor oppretter en Knapp komponent med en mørk bakgrunnsfarge, grå tekstfarge, en kantradius og noe utfylling. Merk at du skriver CSS-egenskapene i camelCase, ikke kebab-case. Dette er fordi camelCase er en mer vanlig måte å skrive CSS-egenskaper i JavaScript.

Når du har opprettet den stilede knappekomponenten, kan du importere den til React-komponentene dine og bruke den.

For eksempel:

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

Dette eksemplet bruker Knapp komponent i en App komponent. Knappen vil ta i bruk stilene du sendte til stylet funksjon, slik at den ser slik ut:

De stylet funksjonen lar deg også neste CSS-stiler, med en lignende syntaks som utvidelsesspråket SASS/SCSS. Dette gjør det lettere for deg å organisere stilene dine og gjøre koden mer lesbar.

Her er et eksempel som bruker nestede stiler-teknikken:

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

Denne koden bruker nestede CSS-stiler og en pseudoklasse for å målrette mot Knapp komponent. Når du holder markøren over knappen, vises den nestede velgeren &:sveve endrer knappens bakgrunn og tekstfarger.

Styling med CSS-funksjonen

Hvis du er ukomfortabel med å lage stilede komponenter, sting biblioteket tilbyr css funksjon, som kan generere klassenavn for å style komponentene dine. De css funksjon tar et JavaScript-objekt med CSS-egenskaper som eneste argument.

Her er hvordan du kan style komponentene dine ved å bruke css funksjon:

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;

De css funksjonen lager CSS-stilene for knappen som denne koden deretter tilordner til knappstil variabel. De knappstil funksjonen genererer et klassenavn for de definerte stilene, som deretter sendes til klassenavn rekvisitt av knapp komponent.

Opprette globale stiler

Bruker sting bibliotek, kan du også definere globale stiler for applikasjonen din ved å bruke globalCss funksjon. GlobalCss-funksjonen oppretter og bruker globale stiler til React-applikasjonen din.

Etter å ha definert dine globale stiler ved hjelp av globalCSS, kall opp funksjonen i din app komponent for å bruke stilene på applikasjonen din.

For eksempel:

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

Dette eksemplet definerer stilene for kropp element ved hjelp av globalCss funksjon. Anropet setter bakgrunnsfargen til #f2f2f2 og tekstfargen til #333333.

Opprette dynamiske stiler

En av de kraftigere funksjonene til sting biblioteket er dets evne til å lage dynamiske stiler. Du kan lage stiler som avhenger av Reager rekvisitter med varianter nøkkel. De varianter nøkkel er en egenskap for både css og stylet funksjoner. Du kan lage så mange varianter av komponenten du vil.

For eksempel:

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

Denne koden lager en Knapp komponent med en farge variant. De farge variant lar deg endre knappens farge basert på en farge rekvisitt. Når du har opprettet Knapp komponent, kan du bruke den i applikasjonen din.

For eksempel:

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

Når du har gjengitt denne applikasjonen, vises to knapper på grensesnittet ditt. Knappene vil se ut som bildet nedenfor.

Opprette tematokens

De sting bibliotek lar deg lage et sett med designtokens som definerer de visuelle aspektene ved brukergrensesnittet ditt, for eksempel farger, typografi, avstand og mer. Disse symbolene bidrar til å opprettholde konsistens og gjør det enkelt å oppdatere applikasjonens generelle stiler.

For å lage disse tematokenene, bruk lage sting funksjon. De lage sting funksjonen fra stitches-biblioteket lar deg konfigurere biblioteket. Sørg for å bruke lage sting funksjon i en stitches.configts fil eller en stitches.config.js fil.

Her er et eksempel på hvordan du lager et tematoken:

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

Nå som du har definert tematokenene dine, kan du bruke dem i komponentstilene dine.

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

Kodeblokken ovenfor bruker fargesymbolene $grå og $svart for bakgrunnen og tekstfargen på knappen. Den bruker også plasssymbolene $1 og $3 for å angi utfylling av knappen og skriftstørrelsesvariabelen $1 for å angi skriftstørrelsen på knappen.

Effektiv styling med sømmer

Stitch-biblioteket gir en kraftig og fleksibel måte å style React-applikasjonene dine på. Med funksjoner som stylede komponenter, dynamiske stiler og globalCSS kan du enkelt lage komplekse design. Enten du bygger en liten eller stor React-applikasjon, kan sømmer være et utmerket valg for styling.

Et flott alternativ til stitches-biblioteket er følelsesbiblioteket. Emotion er et populært CSS-in-JS-bibliotek som lar deg skrive stiler i JavaScript. Den er enkel å bruke og tilbyr mange funksjoner for å lage flotte stiler for applikasjonen din.