React中Tailwind CSS的no-underline类无法去除NavLink下划线问题

问题根源在于NavLink处于激活状态（匹配当前路由）时，activeClassName没有包含no-underline类。你只给默认状态加了no-underline，但激活状态下的样式没继承这个属性，导致浏览器默认的链接下划线再次显现。

解决步骤： #

• 修改activeClassName，把no-underline添加进去，确保激活状态也去除下划线：

<NavLink
  to="/dashboard"
  className={`text-2xl hover:${isDarkMode ? 'text-yellow-400' : 'text-linkGray'} transition duration-300 no-underline`}
  // 这里补充no-underline
  activeClassName={`${isDarkMode ? 'text-yellow-400' : 'text-linkGray'} no-underline`}
>
  <Home size={20} className="inline mr-2" />
  Home
</NavLink>

• 如果还是存在下划线，可能是全局CSS或浏览器默认样式优先级更高，可以尝试使用Tailwind的强制优先级变体!no-underline（优先用上面的方法，此为备选）：

className={`text-2xl hover:${isDarkMode ? 'text-yellow-400' : 'text-linkGray'} transition duration-300 !no-underline`}
activeClassName={`${isDarkMode ? 'text-yellow-400' : 'text-linkGray'} !no-underline`}

• 额外检查：确认全局样式中没有给<a>标签强制设置text-decoration: underline，如果有需要调整全局样式或提高Tailwind类的优先级。

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