Hogyan stílusozd a lebegést a React-ban

Bevezetés

A látványelemekkel való munka kiváló módja annak, hogy interfészünket interaktívan tartsuk, és lekötjük a felhasználó figyelmét. Ha tárgyakat animálunk a képernyőn, az egyedülálló élményt nyújt, és növeli az interaktivitást.

Ebben a cikkben megtudjuk, hogyan lehet stílust lebegni a React alkalmazásban CSS használatával, valamint hogyan kell végrehajtani az inline hover stílust.

A Hover egy pszeudoosztály, amely egyszerűen lehetővé teszi számunkra, hogy meghatározott stílusokat adjunk hozzá, hogy a felhasználó tudatában legyen, ha az egér be van kapcsolva vagy ki van kapcsolva egy adott elemen. Ehhez a cikkhez egy dobozt fogunk használni:

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

amelynek ez az alapstílusa:

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

Lényegében megváltoztatjuk a háttér színét lightblue amikor az egér a doboz fölött van, majd visszaállítja az alapértelmezett stílust, amikor eltávolítja az egeret.

Hogyan stílusozd a lebegést a React-ban

Ennek két megközelítése van: külső és belső. A külsőhöz tartozik egy külön CSS-fájl, amely megkönnyíti a lebegtetéshez való stílust, míg a beágyazott stílus nem teszi lehetővé a pszeudoosztályú stílust, de ebben a cikkben megtanuljuk, hogyan lehet stílust stílusozni a beépített CSS-ben egéresemények használatával.

Hogyan lehet stílusos lebegést reagálni a külső CSS-stílusra

Ez nagyon hasonlít a HTML és a CSS működéséhez; mindössze annyit kell tennünk, hogy megadjuk az a elemet className (Nem class), vagy használja a címkét választóként, amelyet megcélozunk, majd alakítsa ki a hover pszeudoosztály stílusát:

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

Csak annyit tettünk, hogy hozzáadtuk a :hover pszeudo osztályt az előzőleg stílusos kijelölőhöz, és módosítsa azokat a tulajdonságokat, amelyeket meg akartunk változtatni, amikor az egér az elem felett volt.

Hogyan alakítsunk stílust, és reagáljunk a belső stílussal

Inline stílus alatt az elem címkéjén keresztül történő stílust értjük, amely a style tulajdonság. Ha az előző kódot inline stílusra szeretnénk konvertálni:

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

Az ehhez hasonló stílusok megismétlése az alkalmazásunkban megnehezítheti az olvasást, így létrehozhatunk egy stílusobjektumot, ha csak egyetlen objektumot formálunk egy oldalon, és nincs szükség hozzá fájl létrehozására:

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

Eddig megépítettük a dobozunkat. Ahhoz, hogy stílust lehessen váltani a beágyazott CSS-sel a React alkalmazásban, feltételesen beállítjuk a soron belüli stílusokat egy állapot használatával, valamint a onMouseEnter és a onMouseLeave kellékek, amelyek megmondják, mikor van az egér az elemen, és mikor nem:

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

Ezen a ponton bármilyen tulajdonságot feltételesen stílusozhatunk a *isHover* állapot:

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

Eddig láttuk, hogyan kell megvalósítani. Most bontsuk fel a kódunkat, és magyarázzuk el, miért használtuk a szintaxist. Azzal kezdtük, hogy létrehoztunk egy állapotot, amely egy logikai értéket tárol, jelezve, ha lebegés történik (true) és egyébként (alapértelmezés szerint ez van beállítva false):

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

Ezután két eseményt is hozzáadtunk a div-hez, hogy segítsünk az állapotunk megváltoztatásában, és megtudjuk, mikor van az egér a dobozon, és mikor van ki:

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

A onMouseEnter esemény akkor indul el, amikor az egér belép az elembe, míg a onMouseLeave esemény akkor indul el, amikor kilép. Mindegyik eseményhez egy függvényt rendeltünk, amelyet most az állapot megváltoztatására használunk:

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

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

Beállítottuk a state minden függvényben a kiváltott esemény alapján. Végül használhatjuk az állapotot a doboz feltételes stílusának meghatározásához, nem csak azért backgroundColor, hanem bármilyen más stílushoz is:

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

Ha mindezt összerakjuk, mostantól stíluslebeghetünk React with Inline stílusban:

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;

Következtetés

Ebből a cikkből megtanultuk, hogyan lehet stílust lebegni a Reactben külső és belső stílus használatával. Noha a beágyazott stílus nem ajánlott, hasznos megérteni, hogyan működik, arra az esetre, ha felkérnénk a használatára.