如何在Next.js中向Link标签添加CSS或样式组件

Question

无法以任何方式向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>标记内的所有组件，并向Link标记添加passHref，因为它将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>
);
}

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