How to Apply CSS ID Selectors in Next JS?

I'm new to Next JS (after learning that npx create-react-app is discontinued), and I'm trying to convert one of my websites from pure HTML, SASS (CSS) and JavaScript to using Next JS and SASS.

One component I'm working on is my navbar, which as SASS/CSS class names and ID's' applied to it:

import React from 'react'
import navbar from "./navbar.module.scss"

const Navbar = () => {
    return (
        <div>
            <header className={navbar.nav} id={"horizontal"}>
                <div className={navbar.nav_name}><a href="./index.html">Ryan Barillos</a></div>
                <nav className={navbar.nav_links} id="vertical">
                <a href="./pages/about.html" className={navbar.nav_btn} id="active">About Me</a>
                <a href="./pages/projects.html" className={navbar.nav_btn}>Projects</a>
                <a href="./pages/music.html" className={navbar.nav_btn}>Music</a>
                <a href="./pages/contact.html" className={navbar.nav_btn}>Contact</a>
            </nav>
            <div className={navbar.btn_menu} id="open"></div>
        </header>

    </div >
    )
}
export default Navbar

/*
Navigation Bar

Reference(s)
- https://youtu.be/PwWHL3RyQgk?si=V-Lax5dIxIbxD7WI
- https://youtu.be/dPHNrNgM8jI?si=TtWs_gxAgq-NTW-N
- https://youtu.be/5zDYchk3C5k?si=uTUCpG7awRjH64x4
- https://youtu.be/41ZBkZUVApc?si=rVLj0VenAPs0__M_ grid vs. flexbox

Fix(es)
- https://stackoverflow.com/questions/37785345/how-to-get-flexbox-to-include-padding-in-calculations
*/

// Dependencies
@use "../../styles/globals" as global;

// Variables, Modules & Mixins
$size_name: 25px;
$size_pad: 2vw;

// To change button color depending on state
@mixin btnColor($state) {
    // border-style: solid;
    border-radius: 5px;

    @if $state =="hover" {
        background-color: hsl(0, 0%, 20%);
    }

    @else if $state =="active" {
        background-color: hsl(0, 0%, 100%);
        // height: 75%;
    }
}

/*
    Navigation Bar
*/
.nav {
    // Global Settings
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: black;

    /*
    Menu Horizontal - Settings
    */
    &#horizontal {
        // Position
        z-index: 999;
        left: 0;

        // Size settings
        height: global.$height_navbar;

        // Display settings
        align-items: flex-end;
        * {
            color: blue;
        }
    }

    // Menu Vertical - Settings
    &#vertical {
        height: 100%;
        flex-direction: column;
        overflow: scroll;
        visibility: hidden;
        background-color: hsl(0, 0%, 10%);
    }


    /*
    Children properties
    - Center them on both x-axis and y-axis
    - Element's height = Parent Height (button height = navbar height)
    - Text color is WHITE
    */
    * {
        display: flex;
        align-items: center;
        justify-content: center;
        height: inherit;
        color: white;
    }

    // Name Title (or Brand Title)
    &_name {
        // Add padding on navbar
        padding-left: $size_pad;

        // Style settings
        margin-right: auto;
        @include global.poppins($weight: "semibold");
        font-size: $size_name;
    }

    /*
    Navigation Buttons

    NOTE:
    - for button styling, please go to "./button.scss"
    */
    &_links {
        &#horizontal {
            // Add padding on navbar
            padding-right: $size_pad;

            * {
                padding: 0 10px;
                height: 70%;
            }
            background-color: red;
        }

        &#vertical {
            display: flex;
            flex-flow: column;
            // overflow-y: scroll;
            justify-content: flex-start;
            font-size: 1.25rem;

            margin-top: global.$height_navbar;

            * {
                width: 100%;
                height: 10%;
            }
        }
    }

    /*
    Buttons
    */
    &_btn {
        &:hover {
            @include btnColor("hover");
        }
    
        &:active {
            color: black;
            @include btnColor("active");
        }
    
        // ACTIVE - Highlight Color
        &#active {
            color: black;
            @include btnColor("active");
    
            &:hover {
                background-color: hsl(0, 0%, 70%);
            }
    
            &:active {
                color: white;
                background-color: hsl(0, 0%, 40%);
            }
        }

        &_menu {
            &#open {
                background-image: url("../../../public/icons/navigation/menu.svg");
            }
        
            &#close {
                background-image: url("../../../public/icons/navigation/close.svg");
            }
        
            background-size: 100%;
            background-repeat: no-repeat;
        
            background-position: center;
            margin-right: 2vw;
        
            // height: ;
            width: 30px;
        }
    }

}

/*
Dropdown (Hamburger) Menu Button
*/
.btn-menu {
    &#open {
        background-image: url("../../../public/icons/navigation/menu.svg");
    }

    &#close {
        background-image: url("../../../public/icons/navigation/close.svg");
    }

    background-size: 100%;
    background-repeat: no-repeat;

    background-position: center;
    margin-right: 2vw;

    // height: ;
    width: 30px;
}


@media screen and (max-width: 800px) {

    .links {
        display: none;
    }

    .btn-menu {
        display: block;
    }
}

@media screen and (min-width: 800px) {
    // .container-social {
    //     $spaceLR: 5rem;
    //     margin-left: $spaceLR;
    //     margin-right: $spaceLR;
    // }

    .btn-menu {
        display: none;
    }

    .nav {
        &#vertical {
            // display: none;
            // visibility: visible;
            visibility: hidden;
        }
    }
}

As far as globals.scss is concerned, please refer to the global.scss in my Github repo

Despite how rough it is right now---again, just starting out on Next JS---I'm having a hard time on how to apply my style ID's' to my components, as none of them are applying at all. There is no mention on Next JS's Documentation how to do so, and only skips to applying classNames---not what I need for my situation, and so I'm stuck as to how to make my SASS/CSS styling work.

I am aware a similar question was asked a few years ago here, but the answer given provides no code on how to achieve what I want to do, only giving instructions that only those experienced will understand. (I'm not, and I find no help elsewhere.)

So, how am I supposed to apply CSS ID styles onto my Next/React components other than class names, then?

Solution

Method 1

you can use class

<header className={`${navbar.nav} ${navbar.horizontal}`}>

...
.nav {
...
    /*
    Menu Horizontal - Settings
    */
    &.horizontal {
      background: red;
      // Position
      z-index: 999;
      left: 0;
    
      // Size settings
      height: global.$height_navbar;
    
      // Display settings
      align-items: flex-end;
      * {
          color: blue;
      }
    }
...
}
...

Method 2

Use id.

& applies only to the same level.

Other than that, please customize it separately.

<header className={navbar.nav} id={navbar.horizontal}>

...
.nav {
...
    /*
    Menu Horizontal - Settings
    */
    &#horizontal {
      background: red;
      // Position
      z-index: 999;
      left: 0;
    
      // Size settings
      height: global.$height_navbar;
    
      // Display settings
      align-items: flex-end;
      * {
          color: blue;
      }
    }
...
}
...

How to Apply CSS ID Selectors in Next JS?

Method 1

Method 2

Result