Styling di un'applicazione React con punti

Stitches è una moderna libreria CSS-in-JS che fornisce un modo potente e flessibile per modellare le tue applicazioni React. Offre un approccio unico allo styling che combina le parti migliori di CSS e JavaScript, consentendoti di creare facilmente stili dinamici.

Impostazione dei punti

Modellare la tua applicazione React utilizzando punti è simile a utilizzando la libreria dei componenti con stile. Considerando che punti e componenti in stile sono entrambe librerie CSS-in-JS che ti consentono di scrivere stili in JavaScript.

Prima di applicare uno stile alla tua applicazione React, devi installare e configurare la libreria dei punti. Per installare la libreria utilizzando npm, esegui il seguente comando nel tuo terminale:

npm install @stitches/react

In alternativa, puoi installare la libreria utilizzando Yarn con questo comando:

yarn add @stitches/react

Dopo aver installato la libreria dei punti, puoi iniziare a modellare la tua applicazione React.

Creazione di componenti con stile

Per creare componenti con stile, la libreria punti fornisce a in stile funzione. La funzione con stile consente di creare componenti con stile che combinano gli stili CSS e la logica dei componenti.

IL in stile la funzione accetta due argomenti. Il primo è un elemento HTML/JSX e il secondo è un oggetto che contiene le proprietà CSS per dargli uno stile.

Ecco come creare un componente pulsante con stile utilizzando il comando in stile funzione:

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

Il blocco di codice sopra crea un file Pulsante componente con un colore di sfondo scuro, un colore di testo grigio, un raggio del bordo e un po' di riempimento. Tieni presente che scrivi le proprietà CSS in camelCase, non in kebab-case. Questo perché camelCase è un modo più comune di scrivere proprietà CSS in JavaScript.

Una volta creato il componente pulsante con stile, puoi importarlo nei componenti React e utilizzarlo.

Per esempio:

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

Questo esempio utilizza il file Pulsante componente in un App componente. Il pulsante adotterà gli stili che hai passato al file in stile funzione, facendola assomigliare a questa:

IL in stile La funzione consente anche di nidificare gli stili CSS, con una sintassi simile a il linguaggio di estensione SASS/SCSS. Ciò semplifica l'organizzazione dei tuoi stili e rende il codice più leggibile.

Ecco un esempio che utilizza la tecnica degli stili nidificati:

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

Questo codice utilizza stili CSS nidificati e una pseudo-classe per indirizzare il file Pulsante componente. Quando passi il mouse sopra il pulsante, viene visualizzato il selettore nidificato &: passa il mouse cambia i colori dello sfondo e del testo del pulsante.

Stile con la funzione CSS

Se non ti senti a tuo agio nel creare componenti con stili, il file punti la biblioteca offre il css funzione, che può generare nomi di classi per definire lo stile dei tuoi componenti. IL css La funzione accetta un oggetto JavaScript con proprietà CSS come unico argomento.

Ecco come puoi modellare i tuoi componenti utilizzando css funzione:

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;

IL css La funzione crea gli stili CSS per il pulsante che questo codice assegna poi al file pulsanteStile variabile. IL pulsanteStile La funzione genera un nome di classe per gli stili definiti, che viene poi passato al file nome della classe sostegno del pulsante componente.

Creazione di stili globali

Usando il punti libreria, puoi anche definire stili globali per la tua applicazione utilizzando la libreria globalCss funzione. La funzione globalCss crea e applica stili globali alla tua applicazione React.

Dopo aver definito i tuoi stili globali utilizzando globalCSS, chiama la funzione nel tuo app componente per applicare gli stili alla tua applicazione.

Per esempio:

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

Questo esempio definisce gli stili per il file corpo elemento utilizzando l' globalCss funzione. La chiamata imposta il colore di sfondo su #f2f2f2 e il colore del testo #333333.

Creazione di stili dinamici

Una delle funzionalità più potenti di punti libreria è la sua capacità di creare stili dinamici. Puoi creare stili che dipendono da Reagire agli oggetti di scena con il varianti chiave. IL varianti key è una proprietà di entrambi css E in stile funzioni. Puoi creare tutte le varianti del tuo componente che desideri.

Per esempio:

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

Questo codice crea a Pulsante componente con a colore variante. IL colore la variante ti consente di cambiare il colore del pulsante in base a a colore puntello. Una volta creato il file Pulsante componente, puoi usarlo nella tua applicazione.

Per esempio:

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

Una volta eseguito il rendering di questa applicazione, sulla tua interfaccia verranno visualizzati due pulsanti. I pulsanti saranno simili all'immagine qui sotto.

Creazione di token tematici

IL punti La libreria ti consente di creare una serie di token di progettazione che definiscono gli aspetti visivi della tua interfaccia utente, come colori, tipografia, spaziatura e altro. Questi token aiutano a mantenere la coerenza e semplificano l'aggiornamento degli stili generali dell'applicazione.

Per creare questi token tematici, utilizza il file crearepunti funzione. IL crearepunti La funzione dalla libreria punti ti permette di configurare la libreria. Assicurati di utilizzare il file crearepunti funzione in a punti.config.ts file o a punti.config.js file.

Ecco un esempio di come creare un token del tema:

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

Ora che hai definito i token del tema, puoi utilizzarli negli stili dei componenti.

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

Il blocco di codice sopra utilizza i token colore $grigio E $nero per il colore dello sfondo e del testo del pulsante. Utilizza anche i gettoni spazio $1 E $3 per impostare il riempimento del pulsante e la variabile della dimensione del carattere $1 per impostare la dimensione del carattere del pulsante.

Styling efficiente con punti

La libreria di punti fornisce un modo potente e flessibile per modellare le tue applicazioni React. Con funzionalità come componenti con stili, stili dinamici e globalCSS, puoi creare facilmente progetti complessi. Che tu stia creando un'applicazione React piccola o grande, i punti possono essere una scelta eccellente per lo styling.

Un'ottima alternativa alla libreria dei punti è la libreria delle emozioni. Emotion è una popolare libreria CSS-in-JS che ti consente di scrivere stili in JavaScript. È facile da usare e offre molte funzionalità per creare fantastici stili per la tua applicazione.