Як стилізувати наведення в React

Вступ

Робота з візуальними елементами є чудовим способом підтримувати інтерактивність нашого інтерфейсу та привертати увагу користувача. Анімація об’єктів на нашому екрані створює унікальний досвід і підвищує інтерактивність.

У цій статті ми дізнаємося, як стилізувати наведення курсора в React за допомогою CSS, а також як використовувати вбудований стиль наведення.

Hover — це псевдоклас, який просто дозволяє нам додавати певні стилі, щоб повідомляти користувачеві, коли його миша наведена або виключена з певного елемента. Для цієї статті ми використаємо рамку:

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

який має такий базовий стиль:

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

По суті, ми змінимо колір фону на lightblue коли вказівник миші знаходиться над полем, а потім повертає його до стандартного стилю, коли вказівник миші прибирається.

Як стилізувати наведення в React

Існує два підходи до цього: зовнішній і вбудований. Зовнішній передбачає наявність окремого файлу CSS, який полегшує стиль для наведення, тоді як вбудований стиль не дозволяє нам використовувати псевдоклас, але ми дізнаємося, як стилізувати наведення у вбудованому CSS за допомогою подій миші в цій статті.

Як стилізувати наведення курсора в React за допомогою зовнішніх стилів CSS

Це дуже схоже на те, як працюють HTML і CSS; все, що нам потрібно зробити, це дати елемент a className (Не class) або використовуйте тег як селектор, на який ми б націлили, а потім стилізуйте псевдоклас 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;
}

Все, що ми зробили, це додали :hover псевдоклас до попереднього стилізованого селектора та змінювати будь-які властивості, які ми хотіли змінити, коли миша перебувала над елементом.

Як стилізувати наведення курсора в React за допомогою вбудованого стилю

Під вбудованим стилем ми маємо на увазі стиль через тег елемента, який досягається за допомогою style атрибут. Якщо ми хочемо перетворити попередній код на вбудований стиль:

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

Якщо подібні стилі повторюються в нашій програмі, це може ускладнити читання, тому ми можемо створити об’єкт стилю, якщо ми надаємо стиль лише одному об’єкту на сторінці, і немає потреби створювати для нього файл:

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

Поки що ми створили нашу коробку. Щоб стилізувати наведення за допомогою вбудованого CSS у React, ми умовно встановлюємо вбудовані стилі за допомогою стану, а також onMouseEnter та onMouseLeave props, які повідомляють нам, коли миша знаходиться на елементі, а коли ні:

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

На цьому етапі ми можемо умовно стилізувати будь-яку властивість за допомогою *isHover* штат:

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

Наразі ми бачили, як це реалізувати. Тепер давайте розберемо наш код і пояснимо, чому ми використовували саме той синтаксис. Ми почали зі створення стану, який зберігає логічне значення, що вказує, коли відбувається наведення (true) та в іншому випадку (за замовчуванням встановлено значення false):

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

Потім ми також додали дві події до div, щоб допомогти змінити наш стан і знати, коли миша знаходиться на коробці, а коли вона поза коробкою:

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

Команда onMouseEnter подія запускається, коли миша входить в елемент, тоді як onMouseLeave подія запускається, коли вона залишає. Кожній із цих подій ми призначили функцію, яку тепер використовуємо для зміни стану:

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

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

Ми встановлюємо state у кожній функції на основі запущеної події. Нарешті, ми можемо використовувати стан для умовного стилю поля не тільки для backgroundColor, а також для будь-якого іншого стилю:

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

Коли ми все це об’єднуємо, тепер ми можемо стилізувати наведення курсора в React зі стилем 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;

Висновок

У цій статті ми навчилися стилізувати наведення в React, використовуючи як зовнішні, так і вбудовані стилі. Хоча вбудований стиль не рекомендується, корисно зрозуміти, як він працює, якщо нам буде запропоновано його використовувати.