Как стилизовать наведение в 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; все, что нам нужно сделать, это дать элементу 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 с помощью встроенного стиля:

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, используя как внешние, так и встроенные стили. Хотя встроенный стиль не рекомендуется, полезно понять, как он работает, если нам будет предложено его использовать.