css - NextJS 中的 组件似乎丢失了带有 作为子组件的光标指针

Question

我正在使用 NextJS 并想配置顶部导航标题栏。在我的导航栏的左侧，我有一个小的 svg 和文本，我想将其链接到网站的根目录。 Link 组件不允许有多个 child ，所以我这样做了:

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

但是，当我这样做时，整个 div block 都失去了它的光标指针，然后我需要设置一个特定类的光标指针。我也在使用 tailwindCSS。我不确定在这种情况下我做错了什么 - 任何帮助表示赞赏!

Answer 1

<Link> must have <a>里面的标签。您自己定义样式，因此只需添加光标指针 class的 style给你的div .您可以添加 className="cursor-pointer"到您的 div 而不是描述的样式。

<Link href="/">
  <a>
  <div className="" style={{cursor: 'pointer'}}>
    <a>
    <img className="" src="/whistle.svg" />
    <span className="">Root!</span>
    </a>
  </div>
  </a>
</Link>