css moule사용

NavBar.module.css

.nav {
    display: flex;
    justify-content: space-between;
    background-color: tomato;
}
.active {
	color: red
}

NavBar.js

**import <u>styles</u> from "./NavBar.module.css"**

export default function NavBar() {
    return (
        <nav **className={<u>styles</u>.nav}**>
            <Link href="/">
                <a style={{ color: router.pathname === '/' ? "red" : "black" }}>Home</a>
            </Link>
<Link href="/">
                <a className=**{routerpathnme === '/' ? styles.active : ''}**>Home</a>
            </Link>
        </nav>
    )

}

다른 클래스명도 같이 써야 할 때?

.link {
    text-decoration: none;
}

.active {
    color: tomato;
}

1. `` 백틱 문자열로 묶어주기

<Link href="/about">
                <a className={
                    `${styles.link} ${router.pathname === '/about' ? styles.active : ""} `
                }>About</a>
            </Link>

1. 배열로 만든 후 .join(” ”) 으로 묶어주기

<Link href="/about">
                <a className={
                    [styles.link, router.pathname === '/about' ? styles.active : ""].join(" ")
                }>About</a>
            </Link>

단점

1. 파일을 바꿔야 한다 (?) 두개의 파일을 가져야 한다.
2. 클래스명을 기억해야한다.

Styled JSX (=지역css) 사용

a.js