如何实现MUI IconButton hover时切换图标（Tab编辑状态场景）

要实现VSCode那种「编辑后显示圆形图标，悬停时切换为关闭图标」的效果，核心是结合编辑状态和悬停状态判断显示的图标，具体实现步骤如下：

1. 添加悬停状态管理 #

在组件内用useState维护一个记录当前悬停Tab的状态：

import { useState } from 'react';

// 组件内部
const [hoveredTab, setHoveredTab] = useState({});

2. 给IconButton绑定悬停事件 #

给每个Tab的IconButton添加鼠标进出事件，更新悬停状态：

<IconButton
  size="small"
  component="span"
  onClick={() => closeClickHandler(tab.value)}
  onMouseEnter={() => setHoveredTab(prev => ({ ...prev, [tab.value]: true }))}
  onMouseLeave={() => setHoveredTab(prev => ({ ...prev, [tab.value]: false }))}
>

3. 修改图标显示逻辑 #

调整图标判断条件：当Tab有编辑且未悬停时显示圆形图标，其余情况（无编辑/悬停中）显示关闭图标：

{tab.hasEdit && !hoveredTab[tab.value] ? (
  <CircleIcon style={{ fontSize: "12px" }} />
) : (
  <CloseIcon style={{ fontSize: "18px" }} />
)}

完整修改后的代码片段 #

import { useState } from 'react';

// 组件内部
const [hoveredTab, setHoveredTab] = useState({});

// 循环渲染Tabs部分
{tabs.map((tab, index) => {
  const child = (
    <StyledTab
      label={
        <span>
          {tab.label + ':' + tab.hasEdit}
          <IconButton
            size="small"
            component="span"
            onClick={() => closeClickHandler(tab.value)}
            onMouseEnter={() => setHoveredTab(prev => ({ ...prev, [tab.value]: true }))}
            onMouseLeave={() => setHoveredTab(prev => ({ ...prev, [tab.value]: false }))}
          >
            {tab.hasEdit && !hoveredTab[tab.value] ? (
              <CircleIcon style={{ fontSize: "12px" }} />
            ) : (
              <CloseIcon style={{ fontSize: "18px" }} />
            )}
          </IconButton>
        </span>
      }
      value={tab.value}
      key={index}
    />
  );

  return (
    <DraggableTab
      label={
        <span>
          {tab.label}
          <IconButton
            size="small"
            component="span"
            onClick={() => closeClickHandler(tab.value)}
            onMouseEnter={() => setHoveredTab(prev => ({ ...prev, [tab.value]: true }))}
            onMouseLeave={() => setHoveredTab(prev => ({ ...prev, [tab.value]: false }))}
          >
            {tab.hasEdit && !hoveredTab[tab.value] ? (
              <CircleIcon style={{ fontSize: "12px" }} />
            ) : (
              <CloseIcon style={{ fontSize: "18px" }} />
            )}
          </IconButton>
        </span>
      }
      value={tab.value}
      index={index}
      key={index}
      child={child}
    />
  );
})}

可选优化：抽离公共组件 #

如果觉得重复代码过多，可以把图标按钮抽成独立组件，减少冗余：

const TabCloseButton = ({ tab, onClose }) => {
  const [isHovered, setIsHovered] = useState(false);
  return (
    <IconButton
      size="small"
      component="span"
      onClick={() => onClose(tab.value)}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      {tab.hasEdit && !isHovered ? (
        <CircleIcon style={{ fontSize: "12px" }} />
      ) : (
        <CloseIcon style={{ fontSize: "18px" }} />
      )}
    </IconButton>
  );
};

之后在Tab中直接使用：

<TabCloseButton tab={tab} onClose={closeClickHandler} />

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