Kevin Powell - Community•10mo ago

Applying multiple classes, or targetting a google font class in NextJS

Anyone know how to do this? I've got the font working on my h1, but I don't know how to target it. You can't target "h1" in nextjs for some reason, so I need to give it a class... but I can't seem to add multiple classes to this element.

import React from "react";
import Link from "next/link";
import styles from "./Navbar.module.css";
import { Dancing_Script } from "next/font/google";

const dancingScript = Dancing_Script({
  subsets: ["latin"],
  display: "swap",
});

export default function Navbar() {
  return (
    <div className={styles.header}>
      <div>
        <h1 className={dancingScript.className}>Anglian</h1>
      </div>

      <nav className={styles.nav}>
        <Link className={styles.txt} href="/">
          Home
        </Link>
        <Link className={styles.txt} href="/shop">
          Shop
        </Link>
        <Link className={styles.txt} href="/cart">
          Cart
        </Link>
      </nav>
    </div>
  );
}

import React from "react";
import Link from "next/link";
import styles from "./Navbar.module.css";
import { Dancing_Script } from "next/font/google";

const dancingScript = Dancing_Script({
  subsets: ["latin"],
  display: "swap",
});

export default function Navbar() {
  return (
    <div className={styles.header}>
      <div>
        <h1 className={dancingScript.className}>Anglian</h1>
      </div>

      <nav className={styles.nav}>
        <Link className={styles.txt} href="/">
          Home
        </Link>
        <Link className={styles.txt} href="/shop">
          Shop
        </Link>
        <Link className={styles.txt} href="/cart">
          Cart
        </Link>
      </nav>
    </div>
  );
}

1 Reply

CDLOP•10mo ago

Issue I'm having is, how to add a class to this

<h1 className={dancingScript.className}>Anglian</h1>

<h1 className={dancingScript.className}>Anglian</h1>

I don't know why but I can't just target the h1 to style it in my page.modules.css file, so I have to class everything. but I can't add a class to this , because it already ahs dancingScript.className on it so it's a little confusing you can but only in the global css file, in page.modules.css for my page.jsx, it doesn't let me I have no idea how I add a class to style this

<h1 className={dancingScript.className}>Anglian</h1>

<h1 className={dancingScript.className}>Anglian</h1>

Gaming

Programming

Applying multiple classes, or targetting a google font class in NextJS