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

Question

无法以任何方式将 styles 添加到 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>
  );
}

Answer 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>
  );
}

更多信息可以在这里找到。