NextJS中Link组件嵌套div子元素后cursor-pointer样式丢失的问题咨询

Hey there, let's break down why this is happening and walk through a few solutions tailored to your setup.

Why the Cursor Pointer Disappears #

In Next.js (especially if you're using the Pages Router), the Link component requires a single child element—so wrapping your icon and text in a div is the right move. Here's the catch: while the Link renders an <a> tag under the hood (which has cursor: pointer by default in Tailwind), the div inside it doesn't automatically inherit that pointer style. This usually happens because Tailwind's base styles reset block elements like div to use cursor: auto, overriding the inherited pointer behavior from the parent <a> tag.

Solutions to Restore the Cursor Pointer #

1. Manually Add cursor-pointer to the Div (Quickest Fix)

This is the straightforward solution you already discovered, and it works perfectly. Just explicitly add the Tailwind class to your wrapper div:

<Link href="/">
  <div className="cursor-pointer">
    <img className="" src="/whistle.svg" alt="Whistle icon" />
    <span className="">Root!</span>
  </div>
</Link>

Pro tip: Don't forget the alt attribute on your image—it's crucial for accessibility!

2. Skip the Div (App Router Only)

If you're using Next.js's App Router, the Link component supports multiple direct children. You can ditch the wrapper div entirely, and the inner elements will inherit the <a> tag's default cursor: pointer style from Tailwind:

<Link href="/">
  <img className="" src="/whistle.svg" alt="Whistle icon" />
  <span className="">Root!</span>
</Link>

This keeps your markup cleaner and avoids needing the extra class.

3. Global Style Override (For Consistent Behavior)

If you want to avoid adding cursor-pointer every time you wrap elements in a Link, you can add a global CSS rule to make all block elements inside Next.js links inherit the pointer style. Add this to your global Tailwind CSS file (like globals.css):

a[href] > div {
  cursor: pointer;
}

This ensures any div inside a link automatically gets the pointer cursor, but keep in mind this is a broad rule—only use it if you want this behavior everywhere in your project.

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