Styliser une application React peut être un défi, en particulier si vous voulez garder vos styles organisés et maintenables. Pour simplifier ce processus, la bibliothèque Emotion fournit une abstraction de plus haut niveau au-dessus de CSS.
Qu’est-ce qu’Emotion ?
Emotion est une bibliothèque pour styliser les applications React qui fournit un moyen simple et efficace de gérer vos styles. Elle 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’il fournit un moyen plus efficace de gérer vos styles. Par exemple, vous pouvez utiliser des noms de classe identiques dans plusieurs composants sans risquer les collisions de noms qui surviennent lorsque vous travaillez avec CSS/SASS.
La bibliothèque Emotion applique vos styles uniquement aux composants qui les utilisent plutôt qu’à l’ensemble de la page. 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 Emotion
Pour ajouter la bibliothèque Emotion à votre application React, exécutez la commande suivante dans le terminal :
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 en utilisant la css Prop d’Emotion
Une fois que vous aurez installé la bibliothèque Emotion, vous pourrez utiliser le fichier css pour styliser votre application React. La propriété css prop est similaire à la prop style car vous pouvez lui passer des styles sous forme de chaînes de caractères ou d’objets JavaScript ordinaires.
Pour styliser votre application à l’aide de l’élément css vous devez l’importer à partir du fichier @emotion/react puis définissez vos styles :
/** @jsxImportSource @emotion/react */
import React from 'react';
import {css} from '@emotion/react';
function App() {
return (
<button css={css`
padding: 0.5rem 1rem;
border: none;
font-family: cursive;
border-radius: 12px;
color: #333333;
background-color: inherit;
margin-block-start: 2rem;
margin-block-end: 2rem;
`}>
Click Me
</button>
)
}
export default App;
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.
En JSX, un pragma est une fonction qui transforme la syntaxe JSX en JavaScript normal. Par défaut, React utilise le pragma React.createElement comme le pragma JSX. Cependant, avec le pragma @jsxImportSource vous pouvez spécifier un pragma différent.
Dans ce cas, l’option @emotion/react Le pragma indique à JSX d’utiliser l’élément jsx 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 bouton rend un bouton avec un style personnalisé. Ici, le composant css prop ajoute le style personnalisé à l’élément bouton.
L’élément 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 @emotion/react */
import React from 'react';
import {css} from '@emotion/react';
function App() {
return (
<button css={css`
padding: 0.5rem 1rem;
border: none;
font-family: cursive;
border-radius: 12px;
color: #333333;
background-color: inherit;
margin-block-start: 2rem;
margin-block-end: 2rem;
&:hover{
color: #e2e2e2;
background-color: #333333;
}
`}>
Click Me
</button>
)
}
export default App;
Dans cet exemple, la déclaration du style de survol utilise la fonction de style imbriqué de la méthode css prop. 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.
Transmettre des styles d’objets à la prop css
Le css prop accepte également les styles d’objets JavaScript ordinaires. Lorsque vous stylisez plusieurs composants, l’utilisation de styles d’objets vous permet de réutiliser les styles dans vos composants.
Pour transmettre des styles d’objets à la fonction css définir les styles sous la forme d’un objet JavaScript et le transmettre à la fonction prop :
const style = {
padding: '0.5rem 1rem',
border: 'none',
fontFamily: 'cursive',
borderRadius: '12px',
color: '#333333',
backgroundColor: 'inherit',
marginBlockStart: '2rem',
marginBlockEnd: '2rem',
'&:hover': {
color: '#e2e2e2',
backgroundColor: '#333333',
}
}
return (
<div className="app">
<button css={ style }>Click Me</button>
</div>
);
Notez que les noms des propriétés CSS sont en camelCase au lieu d’être séparés par des traits d’union. Cela s’explique par le fait que les styles sont définis en tant qu’objets JavaScript, qui utilisent les conventions d’appellation camelCase.
Styliser à l’aide des composants stylisés
La bibliothèque Emotion utilise également des composants stylisés pour styliser les applications React. L’utilisation des composants stylisés est similaire à celle des composants React, à l’exception du fait qu’ils contiennent des styles dès le départ. Pour créer des composants stylisés, vous utiliserez l’élément styled fonction.
Le stylé permet de créer des composants stylisés réutilisables. Pour utiliser la fonction stylé l’importer à partir de la base de données émotion/stylisme bibliothèque.
Pour obtenir le @emotion/styled dans votre application, vous devez l’installer dans votre projet. Vous pouvez le faire en lançant la commande suivante dans le terminal de votre projet :
npm install @emotion/styled
Après avoir installé la bibliothèque @emotion/styled importer la bibliothèque stylé et définissez vos styles :
import styled from "@emotion/styled";
const Button = styled.button({
padding: '0.5rem 1rem',
border: 'none',
fontFamily: 'cursive',
borderRadius: '12px',
color: '#333333',
backgroundColor: 'inherit',
marginBlockStart: '2rem',
marginBlockEnd: '2rem',
'&:hover': {
color: '#e2e2e2',
backgroundColor: '#333333',
}
})
export default Button;
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.
Comme ça :
import React from 'react';
import Button from './Button';
function App() {
return (
<div>
<Button>Click Me</Button>
</div>
);
}
export default App;
Rendu de l’image App affichera un bouton avec les styles définis dans le fichier Bouton sur votre écran.
Le stylé accepte également les styles de chaîne. Elle est différente de l’approche des styles d’objets mais fonctionne de manière similaire.
import styled from "@emotion/styled";
const Button = styled.button`
padding: 0.5rem 1rem;
border: none;
font-family: cursive;
border-radius: 12px;
color: #333333;
background-color: inherit;
margin-block-start: 2rem;
margin-block-end: 2rem;
&:hover {
color: #e2e2e2;
background-color: #333333;
}
`
export default Button;
Un style efficace avec de l’émotion
Emotion est une puissante bibliothèque de stylisation des 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 l’évolution de votre code.
Donc, si vous êtes à la recherche d’un moyen plus efficace et plus flexible pour styliser vos composants React, considérez Emotion.