[Next.js] next.js css - module

NavBar.js
NavBar.module.css 처럼 모듈을 만들어서 import 해준다.

 

사용할 컴포넌트 안에서 style jsx를 열어주고 css를 적기만하면 끝난다.

→ import 하지 않아도되는 장점과 클래스네임을 일일히 기억할 필요가 없는 장점이 있음.

 

module.css와 마찬가지로 다른 컴포넌트에서 같은 이름을 사용해도 겹치지 않는다.
→ 무작위로 추가적인 클래스네임이 생성되기때문 → 변수이름짓는데 자유로워지며 충돌을 피할 수 있는 장점이있다.

 

.active {
  color: tomato;
}
.link {
  text-decoration: none;
}

import styles from "./NavBar.module.css";

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

// 백틱으로 여러개의 스타일을 주는방법과 배열로 주는 방법 2가지가 존재.

<nav>
      <Link href="/">
        <a className={router.pathname === "/" ? "active" : ""}>Home</a>
      </Link>
      <Link href="/about">
        <a className={router.pathname === "/about" ? "active" : ""}>About</a>
      </Link>
      <style jsx>{`
        nav {
          background-color: tomato;
        }
        a {
          text-decoration: none;
        }
        .active {
          color: white;
        }
      `}</style>
    </nav>