Come applicare lo stile al passaggio del mouse in React

Introduzione

Lavorare con gli elementi visivi è un modo eccellente per mantenere la nostra interfaccia interattiva e per catturare l'attenzione dell'utente. Avere oggetti animati sul nostro schermo crea un'esperienza unica e aumenta l'interattività.

In questo articolo, impareremo come applicare uno stile al passaggio del mouse in React utilizzando CSS, nonché come eseguire uno stile al passaggio del mouse in linea.

Hover è una pseudo-classe che ci consente semplicemente di aggiungere stili specifici per rendere l'utente consapevole quando il suo mouse è acceso e spento da un elemento specifico. Per questo articolo, useremo una casella:

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

che ha questo stile di 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;
}

In sostanza, cambieremo il colore di sfondo in lightblue quando il mouse è sopra la casella e poi riportalo al suo stile predefinito quando il mouse viene rimosso.

Come applicare lo stile al passaggio del mouse in React

Ci sono due approcci a questo: esterno e in linea. External implica avere un file CSS separato che semplifica lo stile per il passaggio del mouse, mentre lo stile inline non ci consente di applicare lo stile con la pseudo-classe, ma impareremo come applicare lo stile al passaggio del mouse in CSS in linea utilizzando gli eventi del mouse in questo articolo.

Come applicare lo stile al passaggio del mouse in risposta allo stile esterno CSS

Questo è molto simile a come funzionano HTML e CSS; tutto ciò che dobbiamo fare è dare l'elemento a className Non sei class) o usa il tag come selettore a cui vorremmo scegliere come target e quindi stilizza la pseudo classe al passaggio del mouse:

.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;
}

Tutto ciò che abbiamo fatto è stato aggiungere il :hover pseudo classe al selettore con lo stile precedente e modificare le proprietà che volevamo modificare quando il mouse era sopra l'elemento.

Come applicare lo stile al passaggio del mouse in risposta allo stile in linea

Per stile in linea, intendiamo lo stile tramite il tag dell'elemento, che si ottiene con il style attributo. Se vogliamo convertire il codice precedente in uno stile 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>
   );
};

Avere stili come questo ripetuti all'interno della nostra app potrebbe rendere difficile la lettura, quindi potremmo creare un oggetto di stile se diamo uno stile a un solo oggetto su una pagina e non è necessario creare un file per questo:

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

Finora, abbiamo costruito la nostra scatola. Per applicare lo stile al passaggio del mouse con CSS inline in React, impostiamo condizionalmente gli stili inline usando uno stato, oltre a onMouseEnter ed onMouseLeave props, che ci dicono quando il mouse è sull'elemento e quando non lo è:

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

A questo punto, possiamo applicare uno stile condizionale a qualsiasi proprietà usando il *isHover* stato:

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

Finora, abbiamo visto come implementarlo. Ora, analizziamo il nostro codice e spieghiamo perché abbiamo usato la sintassi che abbiamo fatto. Abbiamo iniziato creando uno stato che memorizza un valore booleano che indica quando si verifica il passaggio del mouse (true) e altrimenti (per impostazione predefinita è impostato su false):

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

Abbiamo quindi aggiunto anche due eventi al div per aiutare a cambiare il nostro stato e sapere quando il mouse è sulla scatola e quando è fuori dalla scatola:

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

I onMouseEnter l'evento viene attivato quando il mouse entra nell'elemento, mentre il onMouseLeave l'evento viene attivato quando esce. Abbiamo assegnato una funzione a ciascuno di questi eventi, che ora usiamo per cambiare lo stato:

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

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

Abbiamo impostato il state in ciascuna funzione in base all'evento attivato. Infine, possiamo usare lo stato per definire in modo condizionale la casella non solo per backgroundColor, ma anche per qualsiasi altro stile:

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

Quando mettiamo insieme tutto questo, ora siamo in grado di applicare lo stile al passaggio del mouse in Reagire con lo stile 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;

Conclusione

In questo articolo abbiamo imparato come applicare lo stile al passaggio del mouse in React utilizzando sia lo stile esterno che lo stile in linea. Sebbene lo stile in linea non sia raccomandato, è utile capire come funziona nel caso in cui ci venga richiesto di usarlo.