javascript - Gatsby activeClassName not working preview

Question

I am trying to use the activeClassName within Gatsby in order to have the active nav be highlighted. I am now sure where I went wrong

import React from 'react'
import {Link} from 'gatsby'

import headerStyles from './header.module.scss'

const Header = () => {
    return (
        <header className={headerStyles.header}>
            <h1>
                <Link className={headerStyles.title} to="/">
                    Topher's Blog
                </Link>
            </h1>
            <nav>
                <ul className={headerStyles.navList} >
                    <li> <Link className={headerStyles.navItem} activeClassName={headerStyles.acitveNavItem} to="/">Home</Link> </li>
                    <li> <Link className={headerStyles.navItem} activeClassName={headerStyles.acitveNavItem} to="/about">About</Link> </li>
                    <li> <Link className={headerStyles.navItem} activeClassName={headerStyles.acitveNavItem} to="/blog">Blog</Link> </li>
                    <li> <Link className={headerStyles.navItem} activeClassName={headerStyles.acitveNavItem} to="/contact">Contact</Link> </li>
                </ul>
            </nav>
        </header>
    )
}

export default Header

I am not sure why its not working on my server end. enter image description here

Here is my SCSS code if needed.

.header {
  padding: 1rem 0 3rem;
}

.title {
  color: #000000;
  font-size: 3rem;
  text-decoration: none;
}

.nav-list {
  display: flex;
  list-style-type: none;
  margin: 0;
}

.nav-item {
  color: #999999;
  font-size: 0.9rem;
  margin-right: 1.3rem;
  text-decoration: none;
}

.nav-item:hover {
  color: #666666;
}

.active-nav-item {
  color: #333333;
}

Answer 1

You have a typo in the headerStyles.acitveNavItem (note the acitveNavItem). Change it to headerStyles.acitveNavItem:

import React from 'react'
import {Link} from 'gatsby'

import headerStyles from './header.module.scss'

const Header = () => {
    return (
        <header className={headerStyles.header}>
            <h1>
                <Link className={headerStyles.title} to="/">
                    Topher's Blog
                </Link>
            </h1>
            <nav>
                <ul className={headerStyles.navList} >
                    <li> <Link className={headerStyles.navItem} activeClassName={headerStyles.acitveNavItem} to="/">Home</Link> </li>
                    <li> <Link className={headerStyles.navItem} activeClassName={headerStyles.acitveNavItem} to="/about">About</Link> </li>
                    <li> <Link className={headerStyles.navItem} activeClassName={headerStyles.acitveNavItem} to="/blog">Blog</Link> </li>
                    <li> <Link className={headerStyles.navItem} activeClassName={headerStyles.acitveNavItem} to="/contact">Contact</Link> </li>
                </ul>
            </nav>
        </header>
    )
}

export default Header