React结合Tailwind CSS如何实现非激活状态元素的hover变色效果

解决方案 #

最优方案：全量使用Tailwind动态类（推荐） #

直接放弃内联style写法，把所有颜色逻辑都放在动态拼接的className中，从根源规避优先级冲突，同时天然支持状态判断：
你用到的rgba(107, 114, 128)正好对应Tailwind内置的text-gray-500，可以直接复用，代码示例：

<a 
  className={`${activePage === 'example' ? 'text-black' : 'text-gray-500 hover:text-green-500'}`}
>
  Example
</a>

这个写法同时解决两个问题：

• 所有样式都是Tailwind类，不存在优先级冲突，hover伪类选择器权重高于普通类选择器，hover效果可以正常生效
• 只有未激活状态才会加上hover:text-green-500类，激活状态下不会触发hover变色
  如果你的灰色是自定义色值，直接在tailwind.config.js的theme.colors字段扩展自定义颜色即可，后续用法和内置类完全一致。

替代方案：保留内联style的兼容写法 #

如果有特殊场景必须保留内联style，可以给Tailwind的hover类加上!important修饰符提升优先级，同时动态判断仅未激活时添加hover类：

<a 
  className={activePage !== 'example' ? 'hover:!text-green-500' : ''}
  style={{color: activePage === 'example' ? 'black' : "rgba(107, 114, 128)"}} 
> 
  Example
</a>

注意该方案引入了!important优先级规则，非必要不推荐使用。 #

原代码问题原因 #

• 内联样式的CSS优先级天然高于类选择器，因此Tailwind的hover类无法覆盖内联设置的color属性
• 之前的hover类是固定添加的，没有做状态判断，激活状态下也会触发hover逻辑

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