如何实现Button鼠标悬停切换背景色，移开后恢复原状？

完全可以实现悬停切换背景色的效果，也能通过transition属性实现平滑过渡，给你两种可行方案：

方案一：内联事件+状态控制（快速实现） #

通过React的useState管理背景色状态，结合鼠标事件切换状态，同时在样式中加入过渡效果：

import { useState } from 'react';

// 组件内部
const [bgColor, setBgColor] = useState('#E3E3E3');

<Button
  outline
  color="secondary"
  style={{
    marginLeft: 5,
    borderRadius: '5px',
    padding: '2px',
    background: bgColor,
    color: '#000',
    fontSize: 7,
    marginTop: 0,
    transition: 'background 0.1s ease-in-out' // 加入平滑过渡
  }}
  onClick={() => { handleCopy(player) }}
  onMouseEnter={() => setBgColor('#CCCCCC')} // 自定义悬停背景色
  onMouseLeave={() => setBgColor('#E3E3E3')} // 离开时恢复原背景色
>
  <span className="enhanced-sports enhanced-sports-copy4" />
</Button>

方案二：CSS类控制（推荐，更易维护） #

把样式抽离到CSS文件中，利用CSS的:hover伪类实现悬停效果，同时添加过渡：

第一步：添加自定义CSS类 #

.custom-copy-button {
  margin-left: 5px;
  border-radius: 5px;
  padding: 2px;
  background-color: #E3E3E3;
  color: #000;
  font-size: 7px;
  margin-top: 0;
  transition: background-color 0.1s ease-in-out; /* 平滑过渡 */
}

.custom-copy-button:hover {
  background-color: #CCCCCC; /* 自定义悬停背景色 */
}

第二步：修改Button组件 #

<Button
  outline
  color="secondary"
  className="custom-copy-button" // 使用自定义CSS类
  onClick={() => { handleCopy(player) }}
>
  <span className="enhanced-sports enhanced-sports-copy4" />
</Button>

说明：如果你的Button是Material-UI等UI库的组件，可能需要通过classes属性或者sx属性注入样式，核心逻辑都是利用:hover伪类和transition属性实现效果。

内容的提问来源于stack exchange，提问作者KBball