如何为代码中的两个Link组件分别实现不同的鼠标悬停效果

React Router 中的 <Link> 组件最终会渲染为原生的 <a> 标签，所有你传递给 <Link> 的属性（比如className）都会透传到生成的 <a> 元素上，所以只需要给两个链接增加区分标识，就可以像普通 a:hover 一样实现不同的悬停效果。

方案1：自定义类名实现（推荐，可维护性最高） #

给两个 <Link> 分别设置不同的类名，后续单独写类名的 hover 样式即可。
修改后的组件代码：

<ul>
   <li><Link to='/buyer' className="buy-link">I want to buy</Link></li>
   <li><Link to='/seller' className="sell-link">I want to sell</Link></li>
</ul>

对应的CSS代码：

/* 购买链接悬停变红 */
.buy-link:hover {
  color: red;
}
/* 售卖链接悬停变蓝 */
.sell-link:hover {
  color: blue;
}

方案2：结构选择器实现（无需修改JSX，适合临时调整） #

如果你不想修改原有JSX代码，也可以通过父元素的结构选择器匹配两个不同的链接：

/* 匹配第一个li下的购买链接 */
ul li:first-child a:hover {
  color: red;
}
/* 匹配第二个li下的售卖链接 */
ul li:nth-child(2) a:hover {
  color: blue;
}

注意该方案依赖DOM结构顺序，如果后续列表项顺序调整，样式会失效，生产环境更推荐使用方案1。

若使用Tailwind CSS #

可以直接在类名中声明悬停样式，无需额外写CSS：

<ul>
   <li><Link to='/buyer' className="hover:text-red-500">I want to buy</Link></li>
   <li><Link to='/seller' className="hover:text-blue-500">I want to sell</Link></li>
</ul>

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