Stylisation des composants React avec Emotion

Vous souhaitez gérer le stylisme des composants React de manière moderne et puissante? Avec la bibliothèque Emotion, vous pouvez intégrer directement du CSS dans vos composants React et ainsi concevoir efficacement votre interface utilisateur. Dans ce guide, je vous explique les principes de base du stylisme avec Emotion, comment installer et utiliser la bibliothèque, et je vous donne quelques conseils utiles à ce sujet.

Principales conclusions

• Emotion permet d'écrire du CSS en JavaScript et offre une manipulation intuitive.
• Avec Emotion, vous pouvez utiliser différentes techniques de stylisme, y compris les littéraux de modèle et l'utilisation de la propriété css.
• La gestion des styles devient plus modulaire avec l'utilisation d'Emotion, ce qui améliore la réutilisabilité et la lisibilité.

Guide étape par étape

1. Installer Emotion

Vous devez d'abord installer Emotion dans votre projet. Ouvrez le terminal et naviguez vers le répertoire de votre projet. Exécutez la commande suivante pour installer la bibliothèque Emotion:

npm install @emotion/react @emotion/styled

2. Importer du CSS

Dans votre fichier App.jsx, vous pouvez utiliser Emotion. Vous devez importer Emotion pour utiliser la fonction css ainsi que l'importation de l'élément styled. Ajoutez ceci au début de votre fichier:

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import styled from '@emotion/styled';

3. Stylisme avec les littéraux de modèle

Utilisez la fonction css d'Emotion pour créer une variable CSS. Définissez les conventions CSS en utilisant des littéraux de modèle. Voici un exemple de comment vous pouvez écrire une classe Wrapper pour votre application:

const appStyle = css` display: flex; flex-direction: column; font-size: 16px;
`;

Ce code utilise la flexbox pour assurer un agencement de mise en page.

4. Application du style

Pour appliquer le style défini, passez la variable appStyle dans la propriété className de votre élément HTML principal. Voici à quoi cela devrait ressembler:

function App() { return <div css={appStyle}>Bonjour le monde!</div>;
}

5. Utilisation de Styled-Components

En plus de l'utilisation de la variable css, vous pouvez également utiliser des Styled-Components avec Emotion. Pour créer un composant stylisé, vous pouvez utiliser le code suivant:

const Container = styled.div` padding: 20px; background-color: lightblue;
`;

Cela crée un nouveau composant basé sur CSS avec tous les styles définis.

6. Intégration des requêtes médias

Emotion facilite l'intégration des requêtes médias dans votre CSS. Il vous suffit de les ajouter dans le littéral de modèle:

const responsiveStyle = css` @media (max-width: 600px) { font-size: 14px; }
`;

Cette requête média modifie la taille de la police du texte lorsque la largeur d'affichage est inférieure à 600 pixels.

7. Utilisation des effets de survol

Vous pouvez également définir facilement des effets de survol dans vos modèles CSS:

const buttonStyle = css` background-color: blue; color: white; &:hover { background-color: darkblue; }
`;

Cette règle CSS change la couleur de fond de l'élément lorsque survolé avec la souris.

8. Combinaison de styles plus complexes

Emotion permet de combiner plusieurs noms de classes. Cela est rendu possible avec la fonction cx:

import { css, cx } from '@emotion/react';

const primaryStyle = css color: blue;;

const secondaryStyle = css color: red;;

Dans ce cas, le texte est affiché à la fois en bleu et en rouge.

9. Futures extensions

Lorsque vous gérez un grand projet à l'avenir, il peut être utile d'organiser vos styles dans différents modules. Par exemple, vous pouvez créer commonStyles.js et y exporter vos styles de base:

// commonStyles.js
export const flexCenter = css` display: flex; justify-content: center; align-items: center;
`;

Maintenant, vous pouvez insérer flexCenter dans n'importe quelle autre composante.

10. Tests et ajustements

Chargez votre application dans le navigateur et vérifiez si les styles sont correctement affichés. Expérimentez avec différents styles et observez le résultat en temps réel.

Résumé

Avec une combinaison d'Emotion et de React, il est désormais possible de créer des mises en page d'interface utilisateur réalistes. Emotion permet de définir et de gérer efficacement le CSS directement dans JavaScript. Vous pouvez ainsi tirer parti des avantages de la densité des écrans et d'une intégration étroite entre la logique et le style.