如何添加CSS样式到内置的NextJS组件?

Question

我试图将CSS样式添加到内置组件Link。我试图把它包装在一个div造型，但它没有出现在其适当的位置。谁能告诉我下面的项目有什么问题?标题在正确的位置，但Link组件不在正确的位置。

.title {
font-style: italic;
font-size: 20px;
grid-area: title;
align-self: center;
justify-self: center;
}
.card {
background-image: url("/sexygirl.jpg");
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-areas:
". title title ."
". . . ."
". search search ."
". . . .";
gap: 1rem;
}
.search {
grid-area: search;
}

import styles from "/styles/WelcomePage.module.css";
import Link from "next/link";
import Card from "/pages/WelcomePage/Card";
function WelcomePage() {
return (
<>
<Card className={styles.card}>
<h1 className={styles.title}>This is the Title</h1>
<div className="search">
<Link href="/ClassSearch">
<a>Class Search</a>
</Link>
</div>
</Card>
</>
);
}
export default WelcomePage;

Answer 1

您必须为底层锚标记设置样式，而不是Link