React项目中PhosphorIcon如何通过悬停设置背景色（替代双图标切换）

架构老林

2026-6-15

问题

在React项目中使用PhosphorIcon时，我目前通过两个不同的PlusSquare实例配合CSS切换显示隐藏来实现悬停效果，想咨询是否可以直接设置悬停时的背景色（及图标样式）来替代该方案？

当前代码示例：

<a href='#' className='addTableButton'>
  <PlusSquare className='normal' size={32}  />
  <PlusSquare className='hover' size={32} color="#9f6786" weight="fill" />
</a>

CSS代码：

a.addTableButton {
  /* 其他样式 */
  .hover {
    display: none;
  } 
}
a.addTableButton:hover {
  .hover {
    display: block;
  }
  .normal {
    display: none;
  }
}

回答

当然可以，完全没必要渲染两个冗余的图标实例，只保留一个PlusSquare组件，通过CSS伪类:hover直接控制它的颜色、填充权重以及背景色即可，这样代码更简洁，性能也更优。

具体实现方案

简化JSX结构
只保留单个PlusSquare组件，移除重复的实例：

<a href='#' className='addTableButton'>
  <PlusSquare size={32} />
</a>

用CSS控制悬停样式
通过父元素的:hover伪类，直接修改按钮背景和图标样式：

a.addTableButton {
  /* 保留你原有的其他样式 */
  background-color: transparent; /* 默认背景色，可根据需求调整 */
  transition: all 0.2s ease; /* 添加入场过渡，让样式变化更平滑 */
}

/* 图标默认样式 */
a.addTableButton > svg {
  color: #你的默认图标颜色; /* 替换成原normal图标的颜色 */
}

/* 悬停状态下的样式 */
a.addTableButton:hover {
  background-color: #你想要的悬停背景色; /* 设置按钮悬停时的背景色 */
}

a.addTableButton:hover > svg {
  color: #9f6786; /* 沿用原hover图标的颜色 */
  font-weight: 900; /* PhosphorIcon的weight="fill"对应CSS的font-weight:900，不同权重对应数值：thin=100、light=300、regular=400、bold=700 */
}