Een React-toepassing stylen met steken
Stitches is een moderne CSS-in-JS bibliotheek die een krachtige en flexibele manier biedt om je React applicaties te stylen. Het biedt een unieke benadering van styling die de beste delen van CSS en JavaScript combineert, waardoor je eenvoudig dynamische stijlen kunt maken.
Stitches instellen
Het gebruik van de Stitches-bibliotheek voor het stylen van een React-toepassing is vergelijkbaar met het gebruik van de styled-components-bibliotheek, omdat het beide CSS-in-JavaScript-oplossingen zijn waarmee stijlen kunnen worden gemaakt via JavaScript-code.
Om een React-toepassing te stylen, moet je eerst de Stitches-bibliotheek installeren en configureren. Het installatieproces kan worden uitgevoerd met behulp van de terminal door de volgende opdracht uit te voeren met npm:
npm install @stitches/react
Je kunt er ook voor kiezen om de bibliotheek te installeren met behulp van Yarn door de volgende opdracht uit te voeren:
yarn add @stitches/react
Na het installeren van de “stitches”-bibliotheek kan men beginnen met het verfijnen van de esthetiek van zijn React-toepassing.
Gestileerde componenten maken
Om versierde elementen te genereren, biedt Stitches een stylingmethode die bekend staat als de functie “styled”. Deze innovatieve benadering combineert de toepassing van visuele ontwerpprincipes met de inherente functionaliteit van componenten binnen een uniform kader.
De functie styled accepteert twee parameters: de eerste parameter is een opmaak- of JSX-component en de volgende parameter is een object dat de CSS-specificaties bevat die nodig zijn om deze component visueel aantrekkelijk te maken.
Zeker, hier is een voorbeeld van het maken van een gestileerde knop component met behulp van de styled functie in 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",
});
De meegeleverde code genereert een Button element met een sombere achtergrondtint, gedempte tekst, afgeronde hoeken en voldoende witruimte rond de inhoud. Het is belangrijk om op te merken dat wanneer je CSS stijlen specificeert met JavaScript, het gebruikelijk is om camelCase opmaak te gebruiken in plaats van de gebruikelijke kebab-case notatie, omdat dit overeenkomt met de heersende conventies voor opmaak in de context van de taal.
Nadat een verfijnd knopelement is gemaakt, kan het in React-componenten worden geïntegreerd in verschillende applicaties.
Bijvoorbeeld:
import React from "react";
import { Button } from "./Button";
function App() {
return (
<>
<Button>Click Me</Button>
</>
);
}
export default App;
Het gegeven voorbeeld gebruikt het Button component binnen een App component.De knop zal voldoen aan de stijlen die worden voorgeschreven door de functie styled , wat resulteert in het volgende visuele uiterlijk:
Met de functie styled kunnen geneste CSS-stijlen worden opgenomen via de syntaxis, die sterk lijkt op die van de uitbreidingstaal Sass/Scss. Met deze functie kunnen gebruikers hun stijlen beter ordenen en tegelijkertijd de leesbaarheid van hun code verbeteren.
Bekijk de volgende illustratie om een geneste stijl te gebruiken:
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",
},
});
De gegeven code maakt gebruik van ingesloten cascading style sheets (CSS) en een pseudo-class om het uiterlijk van het Button element te specificeren. Wanneer de cursor over de knop wordt geplaatst, wijzigt de voorwaardelijke selector &:hover zowel de achtergrondkleur als de tekstkleur van het genoemde element.
Stylen met de CSS-functie
De Stitches-bibliotheek biedt een alternatieve methode voor degenen die moeite hebben met het maken van gestileerde onderdelen door de implementatie van de CSS-functie. Deze functie kan klassenamen genereren die het stylingproces vergemakkelijken door een JavaScript-object te accepteren dat uitsluitend CSS-eigenschappenspecificaties als invoer bevat.
CSS-styling opnemen in deze JavaScript-toepassing kan worden bereikt door gebruik te maken van de functie css , waarmee aangepaste stijlen kunnen worden geïmplementeerd om het visuele uiterlijk en de gebruikerservaring van de componenten te verbeteren.
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;
De presentatielaag maakt gebruik van een reeks stilistische regels en richtlijnen om de interactiviteit van de elementen van de applicatie te visualiseren. Deze richtlijnen zijn ingekapseld in het object buttonStyles , waarin ze verschillende aspecten definiëren zoals kleur, grootte, spatiëring, uitlijning en andere ontwerpeigenschappen die bijdragen aan het creëren van een intuïtieve en visueel aantrekkelijke gebruikersinterface. Door deze stylingparameters te gebruiken, zorgt het systeem ervoor dat elk element voldoet aan een uniforme visuele taal, waardoor de algemene consistentie en bruikbaarheid tussen verschillende componenten en contexten wordt verbeterd.
Globale stijlen creëren
Door gebruik te maken van de Stitches-bibliotheek kan men universeel toepasbare ontwerpmotieven creëren voor de hele React-applicatie door de globalCss-functie te gebruiken. Deze functie construeert en implementeert alomtegenwoordige stijlelementen die een consistent visueel thema over alle onderdelen van de applicatie verspreiden.
Zodra je je universele ontwerpprincipes hebt vastgesteld met behulp van globalCSS , is het essentieel om deze richtlijnen in je hele applicatie te implementeren door de respectieve functie aan te roepen binnen je gekozen app component. Dit zorgt ervoor dat alle elementen zich houden aan de samenhangende visuele taal en gebruikerservaring die je zorgvuldig hebt ontwikkeld.
Bijvoorbeeld:
import React from "react";
import { globalCss } from "@stitches/react";
const globalStyles = globalCss({
body: { backgroundColor: "#f2f2f2", color: "#333333" },
});
function App() {
globalStyles();
return <></>;
}
export default App;
Het gegeven codefragment demonstreert de toepassing van de functie globalCss , die wordt gebruikt om de stilistische eigenschappen te definiëren die zijn gekoppeld aan het body HTML-element. Deze specifieke aanroep van de globalCss functie stelt een licht grijsblauw (#f2f2f2) in als achtergrondkleur en een donkerder grijstint (#333333) als tekstkleur voor het genoemde element.
Dynamische stijlen maken
De Stitches-bibliotheek biedt een indrukwekkende mogelijkheid die bekend staat als het maken van dynamische stijlen. Hiermee kunnen stijlen worden gegenereerd die afhankelijk zijn van React-props met behulp van de varianten sleutel. Deze sleutel dient als eigenschap voor zowel de CSS als de gestileerde functies, waardoor het mogelijk wordt om talloze variaties van je componenten te maken.
Bijvoorbeeld:
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",
},
},
},
},
});
Het gegeven stukje code genereert een aangepast Button element met een onderscheidende tint afgeleid van een gespecificeerde kleureigenschap. Na het maken is dit visueel opvallende en veelzijdige Button component klaar voor integratie in verschillende toepassingen.
Bijvoorbeeld:
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;
Bij het renderen van de bovengenoemde toepassing zal deze een gebruikersinterface opleveren met twee visueel afgebeelde elementen die lijken op de bijgevoegde grafische voorstelling.
Thema tokens aanmaken
Met de Stitches-bibliotheek kunnen ontwikkelaars een verzameling ontwerpelementen samenstellen die bekend staan als “ontwerp tokens,” die verschillende visuele eigenschappen van hun gebruikersinterface omvatten, waaronder kleurenschema’s, lettertypen, tekenafstand en andere grafische attributen. Door deze tokens te implementeren, kan men zorgen voor uniformiteit in de hele applicatie en tegelijkertijd het algemene uiterlijk gemakkelijk aanpassen.
Gebruik de functie createStitches in de bibliotheek stitches om deze thematische tokens te genereren.Deze functie maakt het mogelijk om het gedrag van de bibliotheek aan te passen en moet worden aangeroepen in een ./stitches.config.ts of ./stitches.config.js bestand.
Hier is een illustratie die het proces demonstreert voor het genereren van een thema token, die kan worden gebruikt in verschillende toepassingen zoals natuurlijke taalverwerking en sentiment analyse:
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",
},
},
});
Na het definiëren van je thema tokens, is het gebruik ervan nu haalbaar binnen de context van je component styling.
import { styled } from "../stitches.config.js";
export const Button = styled("button", {
padding: "$1 $3",
borderRadius: "12px",
fontSize: "$1",
border: "none",
color: '$black',
backgroundColor: '$gray',
});
De bovenstaande code gebruikt de kleurenmunten $grijs en $zwart om de achtergrond- en tekstkleuren van de knop te bepalen, naast het gebruik van de spatiëringsmunten $1 en $3 om de opvulling van de knop te bepalen, terwijl de lettergroottevariabele $1 wordt gebruikt om de lettergrootte van de knop te bepalen.
Efficiënte styling met Stitches
Stitches is een zeer capabele bibliotheek die een robuuste en aanpasbare oplossing biedt om het visuele uiterlijk van React-toepassingen te verbeteren. Met geavanceerde mogelijkheden zoals gestileerde componenten, aanpasbare stijlen en globale CSS kun je heel eenvoudig ingewikkelde ontwerpelementen maken. Of je nu een klein of een groot React-project bouwt, Stitches presenteert zichzelf als een formidabele optie bij het overwegen van stilistische voorkeuren.
Een uitstekend alternatief voor de Stitches-bibliotheek is de Emotion-bibliotheek, een veelgebruikte CSS-in-JS-oplossing waarmee je styling kunt creëren met JavaScript. De eenvoud en veelzijdigheid maken het een aantrekkelijke keuze voor het maken van indrukwekkende ontwerpelementen binnen toepassingen.