La bibliothèque Emotion simplifie votre utilisation de CSS dans React et ajoute également des fonctionnalités de syntaxe pratiques.

Styliser une application React peut être difficile, surtout si vous voulez garder vos styles organisés et maintenables. Pour aider à simplifier ce processus, la bibliothèque Emotion fournit une abstraction de niveau supérieur en plus du CSS.

Qu'est-ce que l'émotion?

Emotion est une bibliothèque pour styliser les applications React qui offre un moyen simple et efficace de gérer vos styles. Il vous permet d'écrire du CSS en JavaScript et fournit une API flexible pour styliser vos composants.

L'un des principaux avantages de l'utilisation d'Emotion pour styliser votre application React est qu'elle offre un moyen plus efficace de gérer vos styles. Par exemple, vous pouvez utiliser des noms de classe identiques dans plusieurs composants sans risquer de nommer des collisions qui surviennent lorsque vous travaillez avec CSS/SASS.

La bibliothèque Emotion applique vos styles uniquement aux composants qui les utilisent plutôt qu'à la page entière. Cela peut vous aider à éviter les conflits avec d'autres styles sur la page et à rendre votre code plus modulaire et réutilisable.

Comment installer l'émotion

Pour ajouter la bibliothèque Emotion à votre application React, exécutez la commande de terminal suivante :

npm install --save @emotion/react

La bibliothèque Emotion devrait maintenant être installée dans votre projet et prête à être utilisée pour styliser votre application React.

Styliser à l'aide de la propriété CSS d'Emotion

Une fois que vous avez installé la bibliothèque Emotion, vous pourrez utiliser le CSS prop pour styliser votre application React. Le CSS prop est similaire au style prop car vous pouvez lui transmettre des styles sous la forme de chaînes ou d'objets JavaScript normaux.

Pour styliser votre application à l'aide de la CSS prop, vous devez l'importer depuis le @émotion/réagir bibliothèque, puis définissez vos styles :

/** @jsxImportSource @émotion/réagir */
importer Réagir depuis'réagir';
importer {css} depuis'@emotion/réagir';
fonctionApplication() {
retour (
 rembourrage: 0.5rem 1rem;
 bordure: aucune ;
 famille de polices: cursive ;
 border-radius: 12px ;
 couleur: #333333;
 couleur de fond: hériter ;
 marge-bloc-début: 2rem;
 margin-block-end: 2rem;
`}>
 Cliquez sur moi
 </button>
 )
}


exporterdéfaut application ;

La première ligne de code, /** @jsxImportSource @emotion/react */, est un commentaire particulier que vous devez ajouter au fichier JSX pour indiquer que la bibliothèque Emotion doit être utilisée comme pragma JSX pour ce fichier.

Dans JSX, un pragma est une fonction qui transforme la syntaxe JSX en JavaScript normal. Par défaut, React utilise le React.createElement fonctionnent comme le pragma JSX. Cependant, avec le @jsxImportSource commentaire, vous pouvez spécifier un pragma différent.

Dans ce cas, le @émotion/réagir pragma dit à JSX d'utiliser le jsx fonction de la bibliothèque Emotion pour transformer le code JSX. En ajoutant le commentaire pragma à un fichier JSX, vous pouvez utiliser les fonctionnalités CSS-in-JS de la bibliothèque Emotion dans vos composants.

Le composant de bouton rend un bouton avec un style personnalisé. Ici le CSS prop ajoute le style personnalisé à l'élément bouton.

Le CSS prop prend également en charge le style imbriqué. Le style imbriqué vous permet d'écrire des styles imbriqués les uns dans les autres.

Par exemple:

/** @jsxImportSource @émotion/réagir */
importer Réagir depuis'réagir';
importer {css} depuis'@emotion/réagir';
fonctionApplication() {
retour (
 rembourrage: 0.5rem 1rem;
 bordure: aucune ;
 famille de polices: cursive ;
 border-radius: 12px ;
 couleur: #333333;
 couleur de fond: hériter ;
 marge-bloc-début: 2rem;
 margin-block-end: 2rem;


 &:flotter{
 couleur: #e2e2e2 ;
 Couleur de l'arrière plan: #333333;
 }
`}>
 Cliquez sur moi
 </button>
 )
}
exporterdéfaut application ;

Dans cet exemple, la déclaration du style de survol utilise la fonctionnalité de style imbriqué du CSS soutenir. L'arrière-plan et la couleur de la police dans le bloc de code ci-dessus changeront chaque fois que vous survolerez le bouton.

Passer des styles d'objets à la prop css

Le CSS prop accepte également les styles d'objet JavaScript standard. Lorsque vous stylisez plusieurs composants, l'utilisation de styles d'objet vous permet de réutiliser des styles dans vos composants.

Pour transmettre des styles d'objet au CSS prop, définissez les styles en tant qu'objet JavaScript et transmettez-le au prop :

constante style = {
 rembourrage: '0.5rem 1rem',
 frontière: 'aucun',
 famille de polices: 'cursive',
 borderRadius: '12px',
 couleur: '#333333',
 Couleur de l'arrière plan: 'hériter',
 margeBlocDébut: '2rem',
 marginBlockEnd: '2rem',
'&:flotter': {
 couleur: '#e2e2e2',
 Couleur de l'arrière plan: '#333333',
 }
}
retour (
"application">

Notez que les noms de propriété CSS sont en camelCased au lieu d'un trait d'union. En effet, les styles sont définis comme des objets JavaScript, qui utilisent les conventions de dénomination camelCase.

Style à l'aide des composants stylisés

La bibliothèque Emotion utilise également des composants de style lors du style des applications React. Utilisation de composants stylés est similaire aux composants React, mis à part le fait qu'ils contiennent des styles prêts à l'emploi. Pour créer des composants stylés, vous utiliserez le stylé fonction.

Le stylé La fonction vous permet de créer des composants stylés réutilisables. Pour utiliser le stylé fonction, importez-la depuis le émotion/style bibliothèque.

Pour obtenir le @emotion/stylé bibliothèque dans votre application, vous l'installerez dans votre projet. Vous pouvez le faire en exécutant la commande suivante dans le terminal de votre projet :

npm installer @emotion/styled

Après avoir installé le @emotion/stylé bibliothèque, importez le stylé fonction et définissez vos styles :

importer stylé depuis"@emotion/stylé";
constante Bouton = stylé.bouton({
 rembourrage: '0.5rem 1rem',
 frontière: 'aucun',
 famille de polices: 'cursive',
 borderRadius: '12px',
 couleur: '#333333',
 Couleur de l'arrière plan: 'hériter',
 margeBlocDébut: '2rem',
 marginBlockEnd: '2rem',


'&:flotter': {
 couleur: '#e2e2e2',
 Couleur de l'arrière plan: '#333333',
 }
})
exporterdéfaut Bouton;

Dans le bloc de code ci-dessus, un composant stylé Bouton est créé. Vous pouvez utiliser ce bouton dans votre application React comme n'importe quel autre composant React.

Ainsi:

importer Réagir depuis'réagir';
importer Bouton depuis'./Bouton';
fonctionApplication() {
retour (








exporterdéfaut application ;

Rendre le Application affichera un bouton avec les styles définis dans le Bouton composant sur votre écran.

Le stylé La fonction accepte également les styles de chaîne. Il semble différent de l'approche des styles d'objets mais fonctionne de manière similaire.

importer stylé depuis"@emotion/stylé";
constante Bouton = style.bouton`
 rembourrage: 0.5rem 1rem;
 bordure: aucune ;
 famille de polices: cursive ;
 border-radius: 12px ;
 couleur: #333333;
 couleur de fond: hériter ;
 marge-bloc-début: 2rem;
 margin-block-end: 2rem;


 &: survolez {
 couleur: #e2e2e2 ;
 Couleur de l'arrière plan: #333333;
 }
`
exporterdéfaut Bouton;

Coiffage efficace avec émotion

Emotion est une bibliothèque puissante pour styliser les composants React qui offre un moyen simple et efficace de gérer vos styles. Que vous soyez un développeur débutant ou expérimenté, Emotion peut vous aider à simplifier le processus de stylisation de votre application React et à faciliter la maintenance et la mise à l'échelle de votre code.

Donc, si vous cherchez un moyen plus efficace et flexible de styliser vos composants React, pensez à Emotion.