How to add CSS Styling to built-in NextJS components?

Question

I am trying to add CSS Styling to the built-in component Link. I attempted to wrap it in a div for styling but it is not appearing in its proper location. Can anyone tell me what the problem is with the following project? The title is in the correct location but the Link component is not.

.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;

Benjamin Bialy · Accepted Answer · 2022-05-27 10:41:56Z

1

You have to style the underlying anchor tag, not Link

answered May 27, 2022 at 10:41

Benjamin Bialy

1541 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

John Jacob Over a year ago

I tried that before but it unfortunately didn't work

Benjamin Bialy Over a year ago

Try display:block on the anchor and then style

John Jacob Over a year ago

I got it, I was an idiot and was setting ClassName to the actual class name instead of {styles.className}. Thanks!

Collectives™ on Stack Overflow

How to add CSS Styling to built-in NextJS components?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related