Чтобы реализовать эффект наведения кнопки в React, вы можете использовать различные методы. Вот несколько часто используемых подходов:

1. CSS Hover: вы можете определить класс CSS со стилями наведения и применить его к компоненту кнопки. Например:

// CSS
.button:hover {
  /* hover styles */
}
// React component
import React from 'react';
import './styles.css';
const Button = () => {
  return <button className="button">Hover Me</button>;
};
export default Button;

2. Встроенные стили: вы также можете использовать встроенные стили в React для определения эффекта наведения. Встроенные стили определяются как объекты JavaScript и могут применяться условно в зависимости от состояний наведения. Например:

import React, { useState } from 'react';
const Button = () => {
  const [hovered, setHovered] = useState(false);
  const handleMouseEnter = () => {
    setHovered(true);
  };
  const handleMouseLeave = () => {
    setHovered(false);
  };
  const buttonStyles = {
    /* normal styles */
    ...(hovered && {
      /* hover styles */
    }),
  };
  return (
    <button
      style={buttonStyles}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      Hover Me
    </button>
  );
};
export default Button;

3. Библиотеки CSS-in-JS. Для React доступно несколько библиотек CSS-in-JS, таких как стилизованные компоненты, Emotion и модули CSS. Эти библиотеки позволяют вам писать стили CSS непосредственно в коде JavaScript. Вот пример использования стилевых компонентов:

import React from 'react';
import styled from 'styled-components';
const Button = styled.button`
  /* normal styles */
  &:hover {
    /* hover styles */
  }
`;
export default Button;

Это всего лишь несколько методов реализации эффектов наведения кнопки в React. Вы можете выбрать тот, который лучше всего соответствует требованиям вашего проекта и стилю кодирования.