React动态导航栏：Home链接非首页文本颜色不生效问题

问题根源 #

你当前的Home链接className逻辑中，非首页时会同时添加text-blue-500和text-black两个类。由于Tailwind类优先级相同，且逻辑顺序不合理，导致text-blue-500的样式覆盖了text-black，无法按预期显示黑色。

修复代码 #

将Home链接的className代码替换为：

<NavLink to="/" className={`${!isHome ? 'text-black' : (navBg ? 'text-blue-500' : 'text-white')}`}>Home</NavLink>

逻辑说明 #

• 非首页（!isHome）时，直接应用text-black，确保链接显示黑色
• 首页状态下，根据滚动状态切换颜色：
  • 未滚动（navBg=false）：显示白色（text-white）
  • 已滚动（navBg=true）：显示蓝色（text-blue-500）

完整修改后的导航栏相关片段 #

<li>
  <NavLink to="/" className={`${!isHome ? 'text-black' : (navBg ? 'text-blue-500' : 'text-white')}`}>Home</NavLink>
</li>

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