Styla en React-applikation med Stitches
Stitches är ett modernt CSS-in-JS-bibliotek som ger ett kraftfullt och flexibelt sätt att utforma dina React-applikationer. Det erbjuder ett unikt tillvägagångssätt för styling som kombinerar de bästa delarna av CSS och JavaScript, så att du enkelt kan skapa dynamiska stilar.
Konfigurera Stitches
Att använda Stitches-biblioteket för att utforma en React-applikation är jämförbart med att använda styled-components-biblioteket, eftersom de båda är CSS-in-JavaScript-lösningar som gör det möjligt att skapa stilar genom JavaScript-kod.
För att kunna styla en React-applikation är det nödvändigt att först installera och konfigurera Stitches-biblioteket. Installationsprocessen kan utföras med hjälp av terminalen genom att köra följande kommando med npm:
npm install @stitches/react
Alternativt kan man välja att installera biblioteket med hjälp av Yarn genom att köra följande kommando:
yarn add @stitches/react
När biblioteket “stitches” har installerats kan man börja med att förfina estetiken i sin React-applikation.
Skapa stylade komponenter
För att generera utsmyckade element erbjuder Stitches en stylingmetod som kallas “styled”-funktionen. Detta innovativa tillvägagångssätt kombinerar tillämpningen av visuella designprinciper och komponenternas inneboende funktionalitet inom ett enhetligt ramverk.
Styled-funktionen accepterar två parametrar; den första parametern är en markup- eller JSX-komponent, och den efterföljande parametern är ett objekt som innehåller de CSS-specifikationer som krävs för att rendera komponenten med visuellt tilltal.
Här är ett exempel på hur man skapar en stylad knappkomponent med hjälp av funktionen styled i 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",
});
Den medföljande koden genererar ett Button -element med en dov bakgrundsfärg, dämpad text, rundade hörn och gott om vitt utrymme runt dess innehåll. Det är viktigt att notera att när man specificerar CSS-stilar med JavaScript är det vanligt att använda camelCase-formatering snarare än den konventionellt använda kebab-case-notationen, eftersom detta följer de rådande konventionerna för styling i samband med språket.
När man har skapat ett förfinat knappelement kan man införa det i sina React-komponenter för integrering i olika applikationer.
Exempel:
import React from "react";
import { Button } from "./Button";
function App() {
return (
<>
<Button>Click Me</Button>
</>
);
}
export default App;
I det här exemplet används komponenten Button i en komponent App .Knappen kommer att överensstämma med de stilar som föreskrivs av funktionen styled , vilket resulterar i ett visuellt utseende enligt följande:
Funktionen styled gör det möjligt att inkludera kapslade CSS-stilar genom sin syntax, som är mycket lik den i tilläggsspråket Sass/Scss. Denna funktion gör det möjligt för användare att bättre ordna sina stilar och samtidigt förbättra läsbarheten i sin kod.
Följande illustration visar hur man kan använda sig av nästlade stilar:
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",
},
});
I den här koden används CSS (cascading style sheets) och en pseudoklass för att ange utseendet på elementet Button. När markören placeras över knappen ändrar den villkorliga väljaren &:hover bakgrundsfärgen samt textfärgen för nämnda element.
Styling med CSS-funktionen
Stitches-biblioteket erbjuder en alternativ metod för dem som kan uppleva obehag när de skapar stylade komponenter genom sin implementering av CSS-funktionen. Denna funktion kan generera klassnamn som underlättar stylingprocessen genom att acceptera ett JavaScript-objekt som enbart innehåller CSS-egenskapsspecifikationer som indata.
Inkorporering av CSS-styling i denna JavaScript-applikation kan uppnås genom att använda funktionen css , som möjliggör implementering av anpassade stilar för att förbättra det visuella utseendet och användarupplevelsen av komponenterna.
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;
Presentationslagret använder en rad stilistiska regler och riktlinjer för att visualisera interaktiviteten hos applikationens element. Dessa riktlinjer är inkapslade i objektet buttonStyles , där de definierar olika aspekter som färg, storlek, avstånd, justering och andra designegenskaper som bidrar till att skapa ett intuitivt och visuellt tilltalande användargränssnitt. Genom att använda dessa stylingparametrar säkerställer systemet att varje element följer ett enhetligt visuellt språk, vilket förbättrar den övergripande konsekvensen och användbarheten mellan olika komponenter och sammanhang.
Skapa globala stilar
Med hjälp av biblioteket Stitches kan man skapa universellt tillämpliga designmotiv i hela sin React-baserade applikation genom att använda globalCss-funktionen. Denna funktion konstruerar och implementerar genomgripande stilistiska element som ger ett konsekvent visuellt tema i alla komponenter i applikationen.
När du har fastställt dina principer för universell design med globalCSS är det viktigt att implementera dessa riktlinjer i hela din applikation genom att anropa respektive funktion i din valda app komponent. Detta säkerställer att alla element följer det sammanhängande visuella språk och den användarupplevelse som du noggrant har utformat.
Till exempel:
import React from "react";
import { globalCss } from "@stitches/react";
const globalStyles = globalCss({
body: { backgroundColor: "#f2f2f2", color: "#333333" },
});
function App() {
globalStyles();
return <></>;
}
export default App;
Det medföljande kodavsnittet visar tillämpningen av funktionen globalCss , som används för att definiera de stilistiska egenskaper som är associerade med HTML-elementet body . Specifikt fastställer denna speciella anrop av globalCss -funktionen en ljus gråblå (#f2f2f2) som bakgrundsfärg och en mörkare nyans av grått (#333333) som textfärg för nämnda element.
Skapa dynamiska stilar
Stitches-biblioteket erbjuder en imponerande funktion som kallas att skapa dynamiska stilar, vilket gör det möjligt att skapa stilar som är beroende av React-props med hjälp av varianter -nyckeln. Denna nyckel fungerar som en egenskap för både CSS- och styled-funktionerna, vilket gör det möjligt att skapa många olika varianter av ens komponenter.
Exempel:
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",
},
},
},
},
});
Den angivna koden genererar ett anpassat Knapp element med en distinkt nyans som härrör från en angiven färgegenskap. Efter skapandet är denna visuellt slående och mångsidiga Button -komponent redo för integrering i olika applikationer.
Till exempel:
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;
När den ovannämnda applikationen renderas ska den ge ett användargränssnitt med två visuellt avbildade element som liknar den bifogade grafiska representationen.
Skapa tematokens
Med Stitches-biblioteket kan utvecklare skapa en samling designelement som kallas “designtokens”, som omfattar olika visuella egenskaper i deras användargränssnitt, inklusive färgscheman, typsnitt, teckenavstånd och andra grafiska attribut. Genom att implementera dessa tokens kan man säkerställa enhetlighet i hela applikationen samtidigt som man enkelt kan justera dess allmänna utseende.
Använd funktionen createStitches i biblioteket stitches för att generera dessa tematiska tokens.Denna funktion gör det möjligt att anpassa bibliotekets beteende och bör anropas i antingen en ./stitches.config.ts eller ./stitches.config.js fil.
Här är en illustration som visar processen för att generera en tematoken, som kan användas i olika applikationer som naturlig språkbehandling och sentimentanalys:
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",
},
},
});
Efter definitionen av dina tematoken är det nu möjligt att använda dem inom ramen för din komponentstyling.
import { styled } from "../stitches.config.js";
export const Button = styled("button", {
padding: "$1 $3",
borderRadius: "12px",
fontSize: "$1",
border: "none",
color: '$black',
backgroundColor: '$gray',
});
Ovanstående kod använder färgtoken $gray och $black för att styra knappens bakgrunds- och textinnehållsfärger, utöver att använda avståndstoken $1 och $3 för att bestämma knappens utfyllnad, medan den förlitar sig på teckenstorleksvariabeln $1 för att fastställa knappens teckenstorlek.
Effektiv styling med Stitches
Stitches är ett mycket kompetent bibliotek som erbjuder en robust och anpassningsbar lösning för att förbättra det visuella utseendet på ens React-applikationer. Med avancerade funktioner som stylade komponenter, justerbara stilar och global CSS är det enkelt att skapa komplicerade designelement. Oavsett om du bygger ett litet eller stort React-projekt är Stitches ett formidabelt alternativ när det gäller stilistiska preferenser.
Ett utmärkt substitut för Stitches-biblioteket är Emotion-biblioteket, som är en allmänt använd CSS-in-JS-lösning som gör det möjligt att skapa styling med JavaScript. Dess enkelhet och mångsidighet gör det till ett attraktivt val för att skapa imponerande designelement i applikationer.