Styling af en React-applikation med sømme

Stitches er et moderne CSS-in-JS-bibliotek, der giver en kraftfuld og fleksibel måde at style dine React-applikationer på. Det tilbyder en unik tilgang til styling, der kombinerer de bedste dele af CSS og JavaScript, så du nemt kan skabe dynamiske stilarter.

Opsætning af sømme

Style din React-applikation ved hjælp af sømme ligner ved hjælp af biblioteket med stilede komponenter. I betragtning af at sting og stylede-komponenter er begge CSS-i-JS-biblioteker, der giver dig mulighed for at skrive typografier i JavaScript.

Før du styler din React-applikation, skal du installere og konfigurere stitches-biblioteket. For at installere biblioteket ved hjælp af npm skal du køre følgende kommando i din terminal:

npm install @stitches/react

Alternativt kan du installere biblioteket ved hjælp af garn med denne kommando:

yarn add @stitches/react

Når du har installeret stitches-biblioteket, kan du begynde at style din React-applikation.

Oprettelse af stilede komponenter

For at skabe stylede komponenter giver stingbiblioteket en stylet fungere. Den stylede funktion lader dig oprette stylede komponenter, der kombinerer CSS-stilarter og komponenternes logik.

Det stylet funktion tager to argumenter. Det første er et HTML/JSX-element, og det andet er et objekt, der indeholder CSS-egenskaberne til at style det.

Her er, hvordan du kan oprette en stylet knapkomponent ved hjælp af stylet fungere:

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 opretter en Knap komponent med en mørk baggrundsfarve, grå tekstfarve, en kantradius og noget udfyldning. Bemærk, at du skriver CSS-egenskaberne i camelCase, ikke kebab-case. Dette skyldes, at camelCase er en mere almindelig måde at skrive CSS-egenskaber i JavaScript.

Når du har oprettet den stylede knapkomponent, kan du importere den til dine React-komponenter og bruge den.

For eksempel:

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

Dette eksempel bruger Knap komponent i en App komponent. Knappen vil adoptere de stilarter, du har givet til stylet funktion, så det ser sådan ud:

Det stylet funktionen lader dig også indlejre CSS-stilarter med en lignende syntaks til SASS/SCSS-udvidelsessproget. Dette gør det nemmere for dig at organisere dine stilarter og gøre din kode mere læsbar.

Her er et eksempel, der bruger teknikken med indlejrede stilarter:

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 kode bruger indlejrede CSS-stile og en pseudo-klasse til at målrette mod Knap komponent. Når du holder markøren over knappen, vises den indlejrede vælger &:hover ændrer knappens baggrund og tekstfarver.

Styling med CSS-funktionen

Hvis du er utilpas med at skabe stylede komponenter, sømme biblioteket tilbyder css funktion, som kan generere klassenavne for at style dine komponenter. Det css funktion tager et JavaScript-objekt med CSS-egenskaber som dets eneste argument.

Her er, hvordan du kan style dine komponenter ved hjælp af css fungere:

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;

Det css funktion opretter CSS-stilene for knappen, som denne kode derefter tildeler til knapstil variabel. Det knapstil funktionen genererer et klassenavn for de definerede stilarter, som derefter sendes til klassenavn rekvisit af knap komponent.

Oprettelse af globale stilarter

Bruger sømme bibliotek, kan du også definere globale stilarter til din applikation ved hjælp af globalCss fungere. GlobalCss-funktionen opretter og anvender globale stilarter til din React-applikation.

Efter at have defineret dine globale stilarter ved hjælp af globalCSS, kalder funktionen i din app komponent til at anvende stilene til din applikation.

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 eksempel definerer stilene for legeme element ved hjælp af globalCss fungere. Opkaldet indstiller baggrundsfarven til #f2f2f2 og tekstfarven til #333333.

Oprettelse af dynamiske stilarter

En af de mere kraftfulde funktioner i sømme bibliotek er dets evne til at skabe dynamiske stilarter. Du kan oprette stilarter, der afhænger af Reager rekvisitter med varianter nøgle. Det varianter nøglen er en egenskab for både css og stylet funktioner. Du kan oprette så mange varianter af din komponent, som 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 kode opretter en Knap komponent med en farve variant. Det farve variant giver dig mulighed for at ændre knappens farve baseret på en farve rekvisit. Når du har oprettet Knap komponent, kan du bruge den i din applikation.

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 gengiver denne applikation, vises to knapper på din grænseflade. Knapperne vil se ud som på billedet nedenfor.

Oprettelse af tematokens

Det sømme bibliotek giver dig mulighed for at oprette et sæt designtokens, der definerer de visuelle aspekter af din brugergrænseflade, såsom farver, typografi, mellemrum og mere. Disse tokens hjælper med at opretholde ensartethed og gør det nemt at opdatere din applikations overordnede stilarter.

For at oprette disse tematokens skal du bruge skabe sømme fungere. Det skabe sømme funktionen fra stitches-biblioteket giver dig mulighed for at konfigurere biblioteket. Sørg for at bruge skabe sømme funktion i en stitches.configts fil eller en stitches.config.js fil.

Her er et eksempel på, hvordan man opretter 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",
 },
 },
});

Nu hvor du har defineret dine tematokens, kan du bruge dem i dine komponentstile.

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 bruger farvetegnene $grå og $sort for knappens baggrund og tekstfarve. Den bruger også plads-tokens $1 og $3 for at indstille udfyldningen af ​​knappen og skriftstørrelsesvariablen $1 for at indstille skriftstørrelsen på knappen.

Effektiv styling med sømme

Stitch-biblioteket giver en kraftfuld og fleksibel måde at style dine React-applikationer på. Med funktioner som stylede komponenter, dynamiske stilarter og globalCSS kan du nemt skabe komplekse designs. Uanset om du bygger en lille eller stor React-applikation, kan sømme være et glimrende valg til styling.

Et godt alternativ til stitches-biblioteket er følelsesbiblioteket. Emotion er et populært CSS-i-JS-bibliotek, der giver dig mulighed for at skrive stilarter i JavaScript. Det er nemt at bruge og tilbyder mange funktioner til at skabe fantastiske stilarter til din applikation.