Kuidas stiilida kursorit Reactis

Sissejuhatus

Visuaalidega töötamine on suurepärane viis meie liidese interaktiivseks hoidmiseks ja kasutaja tähelepanu köitmiseks. Objektide animeerimine meie ekraanil loob ainulaadse kogemuse ja suurendab interaktiivsust.

Sellest artiklist õpime, kuidas CSS-i abil Reactis hõljumise stiili kujundada ja kuidas teha hõljutusstiili.

Hover on pseudoklass, mis võimaldab meil lihtsalt lisada konkreetseid stiile, et anda kasutajale teada, kui tema hiir on konkreetse elemendi sisse- ja väljalülitamisel. Selle artikli jaoks kasutame kasti:

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

millel on järgmine põhistiil:

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

Põhimõtteliselt muudame taustavärvi lightblue kui hiir on kasti kohal ja seejärel tagastage see vaikestiilile, kui hiir eemaldatakse.

Kuidas stiilida kursorit Reactis

Selleks on kaks lähenemisviisi: väline ja sisemine. Väline hõlmab eraldi CSS-faili olemasolu, mis hõlbustab hõljutamist, samas kui tekstisisene stiil ei võimalda meil stiilida pseudoklassiga, kuid me õpime sellest artiklist, kuidas stiilida tekstisiseses CSS-is hiiresündmuste abil.

Kuidas kujundada kursor CSS-i välise stiiliga reageerimisel

See on väga sarnane HTML-i ja CSS-i tööga; peame vaid andma elemendile a className (Mitte class) või kasutage märgendit valijana, mida sihiksime, ja seejärel kujundage hõljumise pseudoklassi stiil:

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

Kõik, mida me tegime, oli lisamine :hover pseudoklass varem stiilis valijale ja muuta kõiki omadusi, mida tahtsime muuta, kui hiir oli elemendi kohal.

Kuidas kujundada kursorit, reageerides sellele sisemise stiiliga

Tekstisisese stiili all peame silmas stiilimist elemendi sildi kaudu, mis saavutatakse style atribuut. Kui tahame eelmise koodi teisendada tekstisiseseks stiiliks:

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

Selliste stiilide kordumine meie rakenduses võib raskendada lugemist, nii et saame luua stiiliobjekti, kui kujundame lehel ainult ühe objekti ja pole vaja selle jaoks faili luua.

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

Siiani oleme oma kasti ehitanud. Reactis tekstisisese CSS-iga kursori hõljutamiseks määrame tinglikult tekstisisesed stiilid oleku abil, samuti onMouseEnter ja onMouseLeave rekvisiidid, mis ütlevad meile, millal hiir on elemendil ja millal mitte:

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

Siinkohal saame tinglikult stiilida mis tahes atribuuti kasutades *isHover* osariik:

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

Siiani oleme näinud, kuidas seda rakendada. Nüüd jagame oma koodi lahti ja selgitame, miks me kasutasime süntaksit. Alustasime oleku loomisega, mis salvestab tõeväärtuse, mis näitab, millal hõljumine toimub (true) ja muul viisil (vaikimisi on see seatud false):

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

Seejärel lisasime lahtrisse div ka kaks sündmust, mis aitavad muuta meie olekut ja teada, millal hiir on kasti peal ja millal väljas:

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

. onMouseEnter sündmus käivitatakse siis, kui hiir siseneb elementi, samal ajal kui onMouseLeave sündmus käivitatakse selle lahkumisel. Määrasime igale sündmusele funktsiooni, mida kasutame nüüd oleku muutmiseks:

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

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

Seadsime state igas funktsioonis käivitatud sündmuse põhjal. Lõpuks saame kasutada olekut kasti tingimuslikuks stiiliks mitte ainult backgroundColor, aga ka mis tahes muu stiili jaoks:

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

Kui me kõik selle kokku paneme, saame nüüd hõljuda stiilis React with 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;

Järeldus

Sellest artiklist õppisime, kuidas Reactis hõljuda, kasutades nii välist kui ka sisemist stiili. Kuigi tekstisisene stiil pole soovitatav, on kasulik mõista, kuidas see toimib, juhuks, kui meil palutakse seda kasutada.