Een React-applicatie stylen met steken

Stitches is een moderne CSS-in-JS-bibliotheek die een krachtige en flexibele manier biedt om uw React-applicaties vorm te geven. Het biedt een unieke stijlbenadering die de beste delen van CSS en JavaScript combineert, waardoor u eenvoudig dynamische stijlen kunt creëren.

Steken instellen

Styling van uw React-applicatie met behulp van hechtingen is gelijkaardig aan met behulp van de stijlcomponentenbibliotheek. Gezien het feit dat hechtingen en gestileerde componenten zijn beide CSS-in-JS-bibliotheken waarmee u stijlen in JavaScript kunt schrijven.

Voordat u uw React-toepassing gaat stylen, moet u de stekenbibliotheek installeren en instellen. Om de bibliotheek te installeren met behulp van npm, voert u de volgende opdracht uit in uw terminal:

npm install @stitches/react

Als alternatief kunt u de bibliotheek installeren met behulp van garen met deze opdracht:

yarn add @stitches/react

Nadat u de stekenbibliotheek heeft geïnstalleerd, kunt u beginnen met het stylen van uw React-toepassing.

Gestyleerde componenten maken

Om gestileerde componenten te maken, biedt de stekenbibliotheek een gestileerd functie. Met de stijlfunctie kunt u stijlcomponenten maken die CSS-stijlen en de logica van componenten combineren.

De gestileerd functie heeft twee argumenten nodig. Het eerste is een HTML/JSX-element en het tweede is een object dat de CSS-eigenschappen bevat om het op te maken.

Zo kunt u een gestileerde knopcomponent maken met behulp van de gestileerd functie:

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

Het bovenstaande codeblok creëert een Knop component met een donkere achtergrondkleur, grijze tekstkleur, een randradius en wat opvulling. Houd er rekening mee dat u de CSS-eigenschappen in camelCase schrijft, niet in kebab-case. Dit komt omdat camelCase een meer gebruikelijke manier is om CSS-eigenschappen in JavaScript te schrijven.

Nadat u de gestileerde knopcomponent hebt gemaakt, kunt u deze in uw React-componenten importeren en gebruiken.

Bijvoorbeeld:

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

In dit voorbeeld wordt gebruik gemaakt van de Knop bestanddeel in een App bestanddeel. De knop neemt de stijlen over die u aan de gestileerd functie, waardoor het er als volgt uitziet:

De gestileerd Met de functie kunt u ook CSS-stijlen nesten, met een vergelijkbare syntaxis als de SASS/SCSS-extensietaal. Dit maakt het gemakkelijker voor u om uw stijlen te ordenen en uw code leesbaarder te maken.

Hier is een voorbeeld waarbij de techniek van geneste stijlen wordt gebruikt:

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

Deze code maakt gebruik van geneste CSS-stijlen en een pseudo-klasse om de Knop bestanddeel. Wanneer u de muisaanwijzer op de knop plaatst, wordt de geneste selector weergegeven &:zweven verandert de achtergrond- en tekstkleuren van de knop.

Styling met de CSS-functie

Als u zich niet op uw gemak voelt bij het maken van gestileerde componenten, kunt u de hechtingen bibliotheek biedt de css functie, die klassenamen kan genereren om uw componenten op te maken. De css function neemt een JavaScript-object met CSS-eigenschappen als enige argument.

Zo kunt u uw componenten stylen met behulp van de css functie:

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 functie maakt de CSS-stijlen voor de knop die deze code vervolgens toewijst aan de knopStijl variabel. De knopStijl function genereert een klassenaam voor de gedefinieerde stijlen, die vervolgens wordt doorgegeven aan de naam van de klasse prop van de knop bestanddeel.

Globale stijlen creëren

De... gebruiken hechtingen bibliotheek, kunt u ook globale stijlen voor uw toepassing definiëren met behulp van de globaalCss functie. De globalCss-functie maakt globale stijlen en past deze toe op uw React-toepassing.

Nadat u uw globale stijlen hebt gedefinieerd met behulp van globalCSS, roep de functie aan in uw app component om de stijlen op uw toepassing toe te passen.

Bijvoorbeeld:

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

In dit voorbeeld worden de stijlen voor de lichaam element met behulp van de globaalCss functie. Met de oproep wordt de achtergrondkleur ingesteld #f2f2f2 en de tekstkleur #333333.

Dynamische stijlen creëren

Een van de krachtigere kenmerken van de hechtingen bibliotheek is het vermogen om dynamische stijlen te creëren. U kunt stijlen maken die afhankelijk zijn van Reageer rekwisieten met de varianten sleutel. De varianten sleutel is een eigenschap van zowel de css En gestileerd functies. U kunt zoveel varianten van uw component maken als u wilt.

Bijvoorbeeld:

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

Deze code maakt een Knop onderdeel met een kleur variant. De kleur Met variant kunt u de kleur van de knop wijzigen op basis van a kleur prop. Zodra u de Knop component, kunt u deze in uw toepassing gebruiken.

Bijvoorbeeld:

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

Zodra u deze applicatie heeft weergegeven, verschijnen er twee knoppen op uw interface. De knoppen zien er uit zoals in de onderstaande afbeelding.

Thematokens maken

De hechtingen Met de bibliotheek kunt u een set ontwerptokens maken die de visuele aspecten van uw gebruikersinterface definiëren, zoals kleuren, typografie, spatiëring en meer. Deze tokens helpen de consistentie te behouden en zorgen ervoor dat het bijwerken van de algemene stijlen van uw toepassing er eenvoudig uitziet.

Om deze thematokens te maken, gebruikt u de maak Steken functie. De maak Steken Met de functie uit de stekenbibliotheek kunt u de bibliotheek configureren. Zorg ervoor dat u de maak Steken functie bij een steken.config.ts bestand of een steken.config.js bestand.

Hier is een voorbeeld van hoe u een thematoken maakt:

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 u uw thematokens heeft gedefinieerd, kunt u deze in uw componentstijlen gebruiken.

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

Het bovenstaande codeblok gebruikt de kleurtokens $grijs En $zwart voor de achtergrond- en tekstkleur van de knop. Het maakt ook gebruik van de spatiefiches $1 En $3 om de opvulling van de knop en de variabele lettergrootte in te stellen $1 om de lettergrootte van de knop in te stellen.

Efficiënt stylen met steken

De stekenbibliotheek biedt een krachtige en flexibele manier om uw React-toepassingen vorm te geven. Met functies zoals gestileerde componenten, dynamische stijlen en globalCSS kunt u eenvoudig complexe ontwerpen maken. Of u nu een kleine of grote React-applicatie bouwt, steken kunnen een uitstekende keuze zijn voor styling.

Een geweldig alternatief voor de stekenbibliotheek is de emotiebibliotheek. Emotion is een populaire CSS-in-JS-bibliotheek waarmee je stijlen in JavaScript kunt schrijven. Het is gemakkelijk te gebruiken en biedt veel functies voor het creëren van geweldige stijlen voor uw toepassing.