Hoverin tyyli Reactissa

esittely

Visuaalien parissa työskenteleminen on erinomainen tapa pitää käyttöliittymämme vuorovaikutteisena ja kiinnittää käyttäjän huomio. Esineiden animointi näytöllämme luo ainutlaatuisen kokemuksen ja lisää interaktiivisuutta.

Tässä artikkelissa opimme, kuinka tyyliin hover Reactissa CSS:n avulla, sekä kuinka tehdä inline hover -tyyli.

Hover on pseudoluokka, jonka avulla voimme yksinkertaisesti lisätä tiettyjä tyylejä, jotta käyttäjä tietää, milloin hänen hiiri on päällä ja pois päältä tietyn elementin kohdalla. Tässä artikkelissa käytämme laatikkoa:

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

jolla on tämä perustyyli:

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

Käytännössä vaihdamme taustavärin lightblue kun hiiri on laatikon päällä, ja palauttaa sen oletustyyliin, kun hiiri poistetaan.

Hoverin tyyli Reactissa

Tähän on kaksi lähestymistapaa: ulkoinen ja sisäinen. Ulkoinen tarkoittaa, että on erillinen CSS-tiedosto, jonka avulla on helppo muotoilla hiiri, kun taas sisäänrakennettu tyyli ei salli meidän tyylistä pseudo-luokassa, mutta tässä artikkelissa opimme, kuinka hover tyyliä käytetään inline CSS:ssä hiiren tapahtumien avulla.

Kuinka muotoilla hiiri reagoimaan CSS-ulkoiseen tyyliin

Tämä on hyvin samanlaista kuin HTML ja CSS toimivat; meidän tarvitsee vain antaa elementille a className (Ei class) tai käytä tunnistetta valitsimena, johon kohdistamme, ja muotoile sitten leijuvan pseudoluokan tyyli:

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

Teimme vain lisäyksen :hover pseudo-luokka aiemmin tyylitellylle valitsimelle ja muuta mitä tahansa ominaisuuksia, joita halusimme muuttaa, kun hiiri oli elementin päällä.

Kuinka muotoilla leijua reagoimaan sisäänrakennetulla tyylillä

Sisäisellä tyylillä tarkoitamme tyyliä elementin tunnisteen avulla, joka suoritetaan style attribuutti. Jos haluamme muuntaa edellisen koodin upotettuun tyyliin:

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

Tällaisten tyylien toistuminen sovelluksessamme voi vaikeuttaa lukemista, joten voimme luoda tyyliobjektin, jos muotoilemme vain yhden objektin sivulla, eikä sille tarvitse luoda tiedostoa:

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

Tähän mennessä olemme rakentaneet laatikkomme. Jotta tyyli leijuisi sisäänrakennetulla CSS:llä Reactissa, asetamme ehdollisesti upotetut tyylit käyttämällä tilaa sekä onMouseEnter ja onMouseLeave rekvisiitta, joka kertoo milloin hiiri on elementin päällä ja milloin ei:

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

Tässä vaiheessa voimme ehdollisesti muotoilla minkä tahansa ominaisuuden käyttämällä *isHover* osavaltio:

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

Toistaiseksi olemme nähneet, kuinka se toteutetaan. Nyt puretaan koodimme ja selitetään, miksi käytimme syntaksia. Aloitimme luomalla tilan, joka tallentaa boolen arvon, joka osoittaa, milloin hiiri tapahtuu (true) ja muutoin (oletuksena se on asetettu false):

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

Lisäsimme myös kaksi tapahtumaa diviin, jotta voimme muuttaa tilaamme ja tietää, milloin hiiri on laatikossa ja milloin se on pois päältä:

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

- onMouseEnter tapahtuma käynnistyy, kun hiiri tulee elementtiin, kun taas onMouseLeave tapahtuma käynnistyy, kun se lähtee. Määritimme kullekin tapahtumalle toiminnon, jota käytämme nyt tilan muuttamiseen:

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

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

Asetimme state jokaisessa funktiossa laukaistun tapahtuman perusteella. Lopuksi voimme käyttää tilaa ehdolliseen tyyliin laatikko ei vain backgroundColor, mutta myös mihin tahansa muuhun tyyliin:

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

Kun yhdistämme tämän kaiken, voimme nyt leijua tyyliin React with Inline -tyylillä:

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;

Yhteenveto

Opimme tässä artikkelissa, kuinka hiirityylin muotoileminen Reactissa käyttämällä sekä ulkoista tyyliä että sisäistä tyyliä. Vaikka upotettua muotoilua ei suositella, on hyödyllistä ymmärtää, miten se toimii, jos meitä kehotetaan käyttämään sitä.