Comment styliser le survol dans React

Introduction

Travailler avec des visuels est un excellent moyen de garder notre interface interactive et de capter l'attention de l'utilisateur. Avoir des objets animés sur notre écran crée une expérience unique et augmente l'interactivité.

Dans cet article, nous apprendrons comment styliser le survol dans React à l'aide de CSS, ainsi que comment créer un style de survol en ligne.

Hover est une pseudo-classe qui nous permet simplement d'ajouter des styles spécifiques pour informer un utilisateur lorsque sa souris est allumée et éteinte sur un élément spécifique. Pour cet article, nous utiliserons une boîte :

const App = () => {
   return (
      <div>
         <div className="box">
            <p>Hover me!</p>
         </div>
      </div>
   );
};

qui a ce style de base :

.box {
   height: 200px;
   width: 200px;
   background-color: rgb(0, 191, 255);
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 30px;
   cursor: pointer;
}

Essentiellement, nous allons changer la couleur d'arrière-plan en lightblue lorsque la souris est au-dessus de la boîte, puis ramenez-la à son style par défaut lorsque la souris est retirée.

Comment styliser le survol dans React

Il existe deux approches pour cela : externe et en ligne. Externe implique d'avoir un fichier CSS séparé qui facilite le style pour le survol, alors que le style en ligne ne nous permet pas de styler avec une pseudo-classe, mais nous apprendrons comment styler le survol en CSS en ligne en utilisant les événements de la souris dans cet article.

Comment styliser le survol dans React avec le style externe CSS

Ceci est très similaire au fonctionnement de HTML et CSS ; tout ce que nous avons à faire est de donner à l'élément un className (Vous n'êtes pas class) ou utilisez la balise comme sélecteur que nous ciblons, puis stylisez la pseudo-classe hover :

.box {
   height: 200px;
   width: 200px;
   background-color: rgb(0, 191, 255);
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 30px;
   cursor: pointer;
}

.box:hover {
   background-color: lightblue;
}

Tout ce que nous avons fait a été d'ajouter le :hover pseudo classe au sélecteur précédemment stylisé et modifiez les propriétés que nous voulions modifier lorsque la souris était sur l'élément.

Comment styliser le survol dans React avec le style en ligne

Par style en ligne, nous entendons le style via la balise de l'élément, qui est accompli avec le style attribut. Si nous voulons convertir le code précédent en style inline :

const App = () => {
   return (
      <div>
         <div
            style={{
               height: '200px',
               width: '200px',
               backgroundColor: 'rgb(0, 191, 255)',
               display: 'flex',
               justifyContent: 'center',
               alignItems: 'center',
               fontSize: '30px',
               cursor: 'pointer',
            }}
         >
            <p>Hover me!</p>
         </div>
      </div>
   );
};

Avoir des styles comme celui-ci répétés dans notre application pourrait rendre la lecture difficile, nous pourrions donc créer un objet de style si nous ne stylisons qu'un seul objet sur une page, et il n'est pas nécessaire de créer un fichier pour cela :

const App = () => {

const boxStyle = {
   height: '200px',
   width: '200px',
   backgroundColor: 'rgb(0, 191, 255)',
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
   fontSize: '30px',
   cursor: 'pointer',
};

   return (
      <div>
         <div style={boxStyle}>
            <p>Hover me!</p>
         </div>
      </div>
   );
};

Jusqu'à présent, nous avons construit notre boîte. Pour styliser le survol avec le CSS en ligne dans React, nous définissons conditionnellement les styles en ligne à l'aide d'un état, ainsi que le onMouseEnter ainsi que onMouseLeave props, qui nous indiquent quand la souris est sur l'élément et quand elle ne l'est pas :

import { useState } from 'react';

const App = () => {
   const [isHover, setIsHover] = useState(false);

   const handleMouseEnter = () => {
      setIsHover(true);
   };
   const handleMouseLeave = () => {
      setIsHover(false);
   };

   const boxStyle = {
      <!-- ... -->
   };

   return (
      <div>
         <div
            style={boxStyle}
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
         >
            <p>Hover me!</p>
         </div>
      </div>
   );
};

À ce stade, nous pouvons styliser conditionnellement n'importe quelle propriété en utilisant le *isHover* Etat:

const boxStyle = {
   
   backgroundColor: isHover ? 'lightblue' : 'rgb(0, 191, 255)',
};

Jusqu'à présent, nous avons vu comment l'implémenter. Maintenant, décomposons notre code et expliquons pourquoi nous avons utilisé la syntaxe que nous avons utilisée. Nous avons commencé par créer un état qui stocke une valeur booléenne indiquant quand le survol se produit (true) et autrement (par défaut, il est défini sur false):

const [isHover, setIsHover] = useState(false);

Nous avons ensuite également ajouté deux événements à la div pour aider à changer notre état et savoir quand la souris est sur la boîte et quand elle est hors de la boîte :

<div
   style={boxStyle}
   onMouseEnter={handleMouseEnter}
   onMouseLeave={handleMouseLeave}
>
   <p>Hover me!</p>
</div>

La onMouseEnter L'événement est déclenché lorsque la souris entre dans l'élément, tandis que l'événement onMouseLeave l'événement est déclenché à sa sortie. Nous avons attribué une fonction à chacun de ces événements, que nous utilisons maintenant pour changer l'état :

const handleMouseEnter = () => {
   setIsHover(true);
};

const handleMouseLeave = () => {
   setIsHover(false);
};

Nous définissons le state dans chaque fonction en fonction de l'événement déclenché. Enfin, nous pouvons utiliser l'état pour styliser conditionnellement la boîte non seulement pour backgroundColor, mais aussi pour tout autre style :

const boxStyle = {
   
   backgroundColor: isHover ? 'lightblue' : 'rgb(0, 191, 255)',
   color: isHover ? 'red' : 'green',
};

Lorsque nous mettons tout cela ensemble, nous sommes maintenant en mesure de styler le survol dans React avec le style Inline :

import { useState } from 'react';

const App = () => {
   const [isHover, setIsHover] = useState(false);

   const handleMouseEnter = () => {
      setIsHover(true);
   };

   const handleMouseLeave = () => {
      setIsHover(false);
   };

   const boxStyle = {
      height: '200px',
      width: '200px',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      fontSize: '30px',
      cursor: 'pointer',
      backgroundColor: isHover ? 'lightblue' : 'rgb(0, 191, 255)',
      color: isHover ? 'red' : 'green',
   };

   return (
      <div>
         <div
            style={boxStyle}
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
         >
            <p>Hover me!</p>
         </div>
      </div>
   );
};

export default App;

Conclusion

Nous avons appris à styliser le survol dans React en utilisant à la fois le style externe et le style en ligne dans cet article. Bien que le style en ligne ne soit pas recommandé, il est utile de comprendre son fonctionnement au cas où nous serions invités à l'utiliser.