React中实现Fluent-UI IconButton hover时从Like切换为LikeSolid

这里给你两种简单易上手的实现方式，适合新手理解：

方法一：纯CSS控制（轻量快捷） #

这种方式不用React状态，靠CSS伪类直接控制图标的显示隐藏，适合只需要hover切换的场景。

首先准备两个图标组件（空心LikeOutline和填充LikeSolid），然后编写组件和样式：

组件代码 #

import LikeOutline from './LikeOutline'; // 你的空心图标组件
import LikeSolid from './LikeSolid';     // 你的填充图标组件
import './LikeButton.css';

function LikeButton() {
  return (
    <button className="like-button">
      <LikeOutline className="like-icon outline" />
      <LikeSolid className="like-icon solid" />
    </button>
  );
}

export default LikeButton;

样式文件（LikeButton.css） #

/* 重置按钮默认样式 */
.like-button {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  position: relative;
  width: 24px; /* 按你的图标尺寸调整 */
  height: 24px;
}

/* 让两个图标重叠 */
.like-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.2s ease; /* 添加过渡动画，更流畅 */
}

/* 默认显示空心图标，隐藏填充图标 */
.like-icon.outline { opacity: 1; }
.like-icon.solid { opacity: 0; }

/* hover时切换显示状态 */
.like-button:hover .like-icon.outline { opacity: 0; }
.like-button:hover .like-icon.solid { opacity: 1; }

方法二：React状态控制（灵活扩展） #

如果之后需要添加点击点赞、保存状态等逻辑，用React的useState结合鼠标事件会更灵活：

import { useState } from 'react';
import LikeOutline from './LikeOutline';
import LikeSolid from './LikeSolid';

function LikeButton() {
  // 用state记录hover状态
  const [isHovered, setIsHovered] = useState(false);

  return (
    <button
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      style={{
        background: 'transparent',
        border: 'none',
        cursor: 'pointer',
        padding: 0,
        width: '24px',
        height: '24px'
      }}
    >
      {/* 根据hover状态渲染对应图标 */}
      {isHovered ? <LikeSolid /> : <LikeOutline />}
    </button>
  );
}

export default LikeButton;

额外提示 #

• 如果你用的是第三方图标库（比如Material UI的FavoriteBorder/Favorite、Ant Design的LikeOutlined/LikeFilled），直接替换上面的图标组件即可，逻辑完全通用。
• 记得给按钮添加无障碍属性，比如aria-label="点赞"，提升可访问性。

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