如何用Chakra UI与Vanilla Extract实现按钮hover时切换图标与文本？

核心思路是通过状态组合判断控制按钮的文本与图标显示，结合Chakra UI的交互钩子或原生鼠标事件跟踪hover状态，再配合Vanilla Extract/Chakra的样式实现文本变色。

步骤1：状态与逻辑处理 #

在组件中定义两个核心状态，通过状态组合推导要展示的内容：

• isFollowing：标记当前是否已关注
• isHovered：标记按钮是否处于hover状态

可以用Chakra UI的useHover钩子简化hover状态管理，也可以手动通过鼠标事件控制：

'use client'; // Next.js 13 App Router 需添加此指令
import { useState } from 'react';
import { Button, Icon, useHover } from '@chakra-ui/react';
import IconA from './IconA'; // 替换为你的图标组件
import IconB from './IconB';
import { style } from '@vanilla-extract/css';

// Vanilla Extract 定义hover样式（用Chakra伪类可省略）
const unfollowHoverStyle = style({
  ':hover': {
    color: '#ef4444', // 对应Chakra的red.500红色
  },
});

export default function FollowButton() {
  const [isFollowing, setIsFollowing] = useState(false);
  // 用Chakra useHover钩子获取hover状态
  const { isHovered, ref } = useHover();

  // 手动控制hover状态的备选方案
  // const [isHovered, setIsHovered] = useState(false);

  // 根据状态组合确定显示的文本和图标
  const displayText = isFollowing 
    ? isHovered ? 'unfollow' : 'following' 
    : 'follow';
  const displayIcon = isFollowing 
    ? isHovered ? <IconB /> : <IconA /> 
    : <IconA />;

  return (
    <Button
      ref={ref} // 配合useHover钩子使用
      // 手动控制hover时替换为以下两行
      // onMouseEnter={() => setIsHovered(true)}
      // onMouseLeave={() => setIsHovered(false)}
      onClick={() => setIsFollowing(!isFollowing)}
      leftIcon={displayIcon}
      // 方案1：用Chakra伪类设置hover文本颜色
      _hover={isFollowing ? { color: 'red.500' } : {}}
      // 方案2：用Vanilla Extract样式类
      // className={isFollowing ? unfollowHoverStyle : ''}
    >
      {displayText}
    </Button>
  );
}

关键说明 #

1. 状态组合判断：通过isFollowing和isHovered的布尔组合直接推导显示内容，逻辑清晰且易维护。
2. Hover状态跟踪：Chakra的useHover钩子封装了原生鼠标事件，比手动写onMouseEnter/onMouseLeave更简洁；如果需要自定义交互，也可以手动控制状态。
3. 样式实现：既可以用Chakra UI内置的_hover伪类属性快速设置颜色，也可以用Vanilla Extract定义独立样式类，按需选择即可。

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