Como estilizar o hover no React

Introdução

Trabalhar com recursos visuais é uma excelente maneira de manter nossa interface interativa e capturar a atenção do usuário. Ter objetos animados em nossa tela cria uma experiência única e aumenta a interatividade.

Neste artigo, aprenderemos como estilizar o foco no React usando CSS, bem como como fazer o estilo de foco inline.

Hover é uma pseudo-classe que simplesmente nos permite adicionar estilos específicos para alertar o usuário quando o mouse está ligado e desligado de um elemento específico. Para este artigo, usaremos uma caixa:

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

que tem este estilo básico:

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

Essencialmente, vamos alterar a cor de fundo para lightblue quando o mouse estiver sobre a caixa e, em seguida, retorne-o ao seu estilo padrão quando o mouse for removido.

Como estilizar o hover no React

Existem duas abordagens para isso: externa e em linha. Externo envolve ter um arquivo CSS separado que facilita o estilo para foco, enquanto o estilo inline não nos permite estilizar com pseudoclasse, mas aprenderemos como estilizar o foco no CSS inline usando eventos de mouse neste artigo.

Como estilizar o Hover em React com CSS External Styling

Isso é muito semelhante ao funcionamento do HTML e do CSS; tudo o que temos a fazer é dar ao elemento um className (Não é class) ou use a tag como o seletor que direcionaríamos e, em seguida, estilize a pseudo classe 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;
}

Tudo o que fizemos foi adicionar o :hover pseudo para o seletor com estilo anterior e altere qualquer uma das propriedades que desejamos alterar quando o mouse estiver sobre o elemento.

Como Estilizar o Hover em Reagir com Estilo Inline

Por estilo inline, queremos dizer estilo por meio da tag do elemento, que é realizada com o style atributo. Se quisermos converter o código anterior em estilo embutido:

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

Ter estilos como este repetidos em nosso aplicativo pode dificultar a leitura, portanto, poderíamos criar um objeto de estilo se estivéssemos apenas estilizando um único objeto em uma página e não há necessidade de criar um arquivo para ele:

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

Até agora, construímos nossa caixa. Para estilizar o foco com CSS inline no React, definimos condicionalmente estilos inline usando um estado, bem como o onMouseEnter e onMouseLeave props, que nos informam quando o mouse está no elemento e quando não está:

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

Neste ponto, podemos estilizar condicionalmente qualquer propriedade usando o *isHover* Estado:

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

Até agora, vimos como implementá-lo. Agora, vamos detalhar nosso código e explicar por que usamos a sintaxe que usamos. Começamos criando um estado que armazena um valor booleano indicando quando ocorre o pairar (true) e caso contrário (por padrão, é definido como false):

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

Em seguida, também adicionamos dois eventos ao div para ajudar a alterar nosso estado e saber quando o mouse está na caixa e quando está fora da caixa:

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

A onMouseEnter evento é acionado quando o mouse entra no elemento, enquanto o onMouseLeave evento é acionado quando sai. Atribuímos uma função a cada um desses eventos, que agora usamos para alterar o estado:

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

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

Nós definimos o state em cada função com base no evento acionado. Finalmente, podemos usar o estado para estilizar condicionalmente a caixa não apenas para backgroundColor, mas também para qualquer outro estilo:

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

Quando juntamos tudo isso, agora podemos estilizar o foco no React com o estilo 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;

Conclusão

Aprendemos como estilizar o foco no React usando tanto o estilo externo quanto o estilo inline neste artigo. Embora o estilo inline não seja recomendado, é útil entender como ele funciona caso sejamos solicitados a usá-lo.