Styliser une application React avec des points

Stitches est une bibliothèque CSS-in-JS moderne qui offre un moyen puissant et flexible de styliser vos applications React. Il offre une approche unique du style qui combine les meilleurs éléments de CSS et de JavaScript, vous permettant de créer facilement des styles dynamiques.

Configuration des points

Styliser votre application React en utilisant des points de suture est similaire à en utilisant la bibliothèque de composants stylisés. Considérant que les points de suture et composants stylisés sont deux bibliothèques CSS-in-JS qui vous permettent d'écrire des styles en JavaScript.

Avant de styliser votre application React, vous devez installer et configurer la bibliothèque de points. Pour installer la bibliothèque à l'aide de npm, exécutez la commande suivante dans votre terminal :

npm install @stitches/react

Alternativement, vous pouvez installer la bibliothèque en utilisant fil avec cette commande :

yarn add @stitches/react

Une fois que vous avez installé la bibliothèque de points, vous pouvez commencer à styliser votre application React.

Création de composants stylisés

Pour créer des composants stylisés, la bibliothèque de points fournit un stylisé fonction. La fonction styled vous permet de créer des composants stylisés qui combinent les styles CSS et la logique des composants.

Le stylisé la fonction prend deux arguments. Le premier est un élément HTML/JSX et le second est un objet qui contient les propriétés CSS pour le styliser.

Voici comment créer un composant de bouton stylisé à l'aide de l'outil stylisé fonction:

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

Le bloc de code ci-dessus crée un Bouton composant avec une couleur d'arrière-plan sombre, une couleur de texte grise, un rayon de bordure et un peu de remplissage. Notez que vous écrivez les propriétés CSS dans camelCase, et non dans kebab-case. En effet, camelCase est une manière plus courante d'écrire des propriétés CSS en JavaScript.

Une fois que vous avez créé le composant bouton stylisé, vous pouvez l'importer dans vos composants React et l'utiliser.

Par exemple:

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

Cet exemple utilise le Bouton composant dans un Application composant. Le bouton adoptera les styles que vous avez transmis au stylisé fonction, ce qui donne à cela la forme suivante :

Le stylisé La fonction vous permet également d'imbriquer les styles CSS, avec une syntaxe similaire à le langage d'extension SASS/SCSS. Cela vous permet d'organiser plus facilement vos styles et de rendre votre code plus lisible.

Voici un exemple utilisant la technique des styles imbriqués :

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

Ce code utilise des styles CSS imbriqués et une pseudo-classe pour cibler les Bouton composant. Lorsque vous survolez le bouton, le sélecteur imbriqué &:flotter modifie les couleurs d'arrière-plan et de texte du bouton.

Style avec la fonction CSS

Si vous n'êtes pas à l'aise avec la création de composants stylisés, le des points de suture la bibliothèque propose css fonction, qui peut générer des noms de classe pour styliser vos composants. Le css La fonction prend un objet JavaScript avec des propriétés CSS comme seul argument.

Voici comment styliser vos composants à l’aide du css fonction:

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;

Le css La fonction crée les styles CSS pour le bouton que ce code attribue ensuite au style de bouton variable. Le style de bouton La fonction génère un nom de classe pour les styles définis, qui est ensuite transmis au nom du cours accessoire du bouton composant.

Création de styles globaux

En utilisant le des points de suture bibliothèque, vous pouvez également définir des styles globaux pour votre application à l'aide de la globalCss fonction. La fonction globalCss crée et applique des styles globaux à votre application React.

Après avoir défini vos styles globaux à l'aide de globalCSS, appelez la fonction dans votre application composant pour appliquer les styles à votre application.

Par exemple:

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

Cet exemple définit les styles pour le corps élément en utilisant le globalCss fonction. L'appel définit la couleur d'arrière-plan sur #f2f2f2 et la couleur du texte à #333333.

Création de styles dynamiques

L'une des fonctionnalités les plus puissantes du des points de suture La bibliothèque est sa capacité à créer des styles dynamiques. Vous pouvez créer des styles qui dépendent de Réagir aux accessoires avec le variantes clé. Le variantes la clé est une propriété à la fois du css et stylisé les fonctions. Vous pouvez créer autant de variantes de votre composant que vous le souhaitez.

Par exemple:

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

Ce code crée un Bouton composant avec un couleur une variante. Le couleur variante vous permet de changer la couleur du bouton en fonction d'un couleur soutenir. Une fois que vous avez créé le Bouton composant, vous pouvez l’utiliser dans votre application.

Par exemple:

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

Une fois que vous aurez rendu cette application, deux boutons s'afficheront sur votre interface. Les boutons ressembleront à l'image ci-dessous.

Création de jetons de thème

Le des points de suture La bibliothèque vous permet de créer un ensemble de jetons de conception qui définissent les aspects visuels de votre interface utilisateur, tels que les couleurs, la typographie, l'espacement, etc. Ces jetons aident à maintenir la cohérence et facilitent la mise à jour des styles globaux de votre application.

Pour créer ces jetons de thème, utilisez le créer des points fonction. Le créer des points La fonction de la bibliothèque de points permet de configurer la bibliothèque. Assurez-vous d'utiliser le créer des points fonctionner dans un points de suture.config.ts fichier ou un points de suture.config.js déposer.

Voici un exemple de création d'un jeton de thème :

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

Maintenant que vous avez défini vos jetons de thème, vous pouvez les utiliser dans vos styles de composants.

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

Le bloc de code ci-dessus utilise les jetons de couleur $gris et $noir pour l'arrière-plan et la couleur du texte du bouton. Il utilise également les jetons spatiaux $1 et $3 pour définir le remplissage du bouton et la variable de taille de police $1 pour définir la taille de la police du bouton.

Style efficace avec des points

La bibliothèque de points fournit un moyen puissant et flexible de styliser vos applications React. Avec des fonctionnalités telles que les composants stylisés, les styles dynamiques et globalCSS, vous pouvez facilement créer des conceptions complexes. Que vous construisiez une petite ou une grande application React, les points peuvent être un excellent choix pour le style.

Une excellente alternative à la bibliothèque de points est la bibliothèque d’émotions. Emotion est une bibliothèque CSS-in-JS populaire qui vous permet d'écrire des styles en JavaScript. Il est facile à utiliser et offre de nombreuses fonctionnalités pour créer de superbes styles pour votre application.