Jak stylizować zawis w React

Wprowadzenie

Praca z wizualizacjami to doskonały sposób na zachowanie interaktywnego interfejsu i przyciągnięcie uwagi użytkownika. Animowanie obiektów na naszym ekranie tworzy wyjątkowe wrażenia i zwiększa interaktywność.

W tym artykule dowiemy się, jak stylizować najechanie w React za pomocą CSS, a także jak wykonać styl najazdu inline.

Hover to pseudoklasa, która po prostu pozwala nam dodawać określone style, aby uświadomić użytkownikowi, kiedy jego mysz jest włączana i wyłączana z określonego elementu. W tym artykule użyjemy pudełka:

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

który ma tę podstawową stylizację:

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

Zasadniczo zmienimy kolor tła na lightblue gdy mysz znajduje się nad pudełkiem, a następnie przywróć mu domyślny styl po usunięciu myszy.

Jak stylizować zawis w React

Istnieją dwa podejścia do tego: zewnętrzne i wbudowane. Zewnętrzny oznacza posiadanie oddzielnego pliku CSS, który ułatwia stylizowanie dla najechania, podczas gdy stylizacja w wierszu nie pozwala nam stylizować za pomocą pseudoklas, ale nauczymy się stylizować najechanie w wbudowanym CSS za pomocą zdarzeń myszy w tym artykule.

Jak stylizować Hover w reakcji z zewnętrznym stylem CSS?

Jest to bardzo podobne do działania HTML i CSS; wszystko co musimy zrobić to podać element a className (nie jesteś class) lub użyj tagu jako selektora, na który chcemy ustawić cel, a następnie nadaj styl pseudoklasie 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;
}

Wszystko, co zrobiliśmy, to dodać :hover pseudoklasa do poprzednio stylizowanego selektora i zmień dowolne właściwości, które chcieliśmy zmienić, gdy mysz znajdowała się nad elementem.

Jak stylizować Hover w reakcji za pomocą stylizacji inline?

Przez styl inline rozumiemy stylizację za pomocą tagu elementu, która jest realizowana za pomocą style atrybut. Jeśli chcemy przekonwertować powyższy kod na stylizację 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>
   );
};

Powtarzanie stylów takich jak ten w naszej aplikacji może utrudnić czytanie, więc możemy utworzyć obiekt stylu, jeśli stylizujemy tylko jeden obiekt na stronie i nie ma potrzeby tworzenia dla niego pliku:

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

Do tej pory zbudowaliśmy nasze pudełko. Aby nadać styl najechaniu za pomocą wbudowanego CSS w React, warunkowo ustawiamy style wbudowane za pomocą stanu, a także onMouseEnter i onMouseLeave rekwizyty, które informują nas, kiedy mysz jest na elemencie, a kiedy nie:

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

W tym momencie możemy warunkowo stylizować dowolną właściwość za pomocą *isHover* stan:

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

Do tej pory widzieliśmy, jak to wdrożyć. Teraz podzielmy nasz kod i wyjaśnijmy, dlaczego użyliśmy składni, którą zrobiliśmy. Zaczęliśmy od stworzenia stanu, który przechowuje wartość logiczną wskazującą, kiedy następuje najechanie kursorem (true) i w inny sposób (domyślnie jest to false):

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

Następnie dodaliśmy również dwa zdarzenia do div, aby pomóc zmienić nasz stan i wiedzieć, kiedy mysz znajduje się na pudełku, a kiedy nie:

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

Połączenia onMouseEnter zdarzenie jest wyzwalane, gdy mysz wejdzie do elementu, podczas gdy onMouseLeave zdarzenie jest wyzwalane, gdy opuszcza. Każdemu z tych zdarzeń przypisaliśmy funkcję, której teraz używamy do zmiany stanu:

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

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

Ustawiliśmy state w każdej funkcji na podstawie wyzwolonego zdarzenia. Wreszcie możemy użyć stanu, aby warunkowo stylizować pudełko nie tylko dla backgroundColor, ale także do każdego innego stylu:

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

Kiedy to wszystko połączymy, możemy teraz stylizować kursor w React ze stylem 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;

Wnioski

W tym artykule dowiedzieliśmy się, jak stylizować najechanie w React za pomocą stylów zewnętrznych i wbudowanych. Chociaż stylizacja inline nie jest zalecana, warto zrozumieć, jak to działa, na wypadek, gdybyśmy zostali poproszeni o jej użycie.