如何将 CSS 或 styled-components 添加到 Next.js 中的 Link 标签？

【问题标题】：How to add CSS or styled-components to Link tag in Next.js?如何将 CSS 或 styled-components 添加到 Next.js 中的 Link 标签？
【发布时间】：2022-08-09 00:16:26
【问题描述】：

无法以任何方式将样式添加到 next.js <Link> 标记。

代码：

import Link from \"next/link\";
import styles from \"../Components.module.css\";

export default function SubjectBTN({ lable, path }) {
  return (
    <Link href={path} className={styles.SubjectBTN}>
        <div>{lable}</div>
    </Link>
  );
}

标签： css next.js hyperlink styled-components next-link

【解决方案1】：

解决方案很简单，用<a> 标记将<Link> 标记内的所有组件包装起来，再加上将passHref 添加到Link 标记，因为它将href 从Link 标记传递到a 标记，否则，如果你没有'不要添加 passHref，有时它会显示一个 <div> 包装组件而不是标签，这将导致糟糕的 SEO。代码应如下所示：

import Link from "next/link";
import styles from "../Components.module.css";

export default function SubjectBTN({ lable, path }) {
  return (
    <Link href={path} passHref>
      <a className={styles.SubjectBTN}>
        <div>{lable}</div>
      </a>
    </Link>
  );
}

更多信息可以找到here。

【讨论】：