Next.js中无法去除Link组件下划线的问题求助

你的问题在于Next.js的Link组件（Pages Router版本）本身是容器元素，实际可点击的链接是它内部渲染出的<a>标签。你之前给Link和span设置的样式都作用在容器上，而非真正的链接标签，所以下划线无法被移除。

下面是几种可行的解决方案：

• 方案1：用Tailwind伪类直接选中内部a标签（推荐）
  利用Tailwind的[&>a]伪类选择器，直接给Link内部的a标签应用no-underline样式：

  <Link
    href="/home"
    className="hidden sm:block font-semibold text-xl [&>a]:no-underline"
  >
    Computer Repair Shop
  </Link>
  

  无需额外嵌套span，直接把文本放在Link组件内即可。

• 方案2：自定义全局CSS类
  在全局样式文件（比如globals.css）中添加以下样式：

  .link-no-underline a {
    text-decoration: none !important;
  }
  

  然后给Link组件添加这个自定义类：

  <Link
    href="/home"
    className="hidden sm:block font-semibold text-xl link-no-underline"
  >
    Computer Repair Shop
  </Link>
  

• 方案3：手动嵌套a标签并设置样式
  如果需要更直接的控制，可以在Link内部手动编写a标签，直接给a标签添加样式：

  <Link href="/home">
    <a className="hidden sm:block font-semibold text-xl no-underline">
      Computer Repair Shop
    </a>
  </Link>
  

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