CSS module

먼저 module.css 파일을 만들어주고,

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

CSS를 작성해준다.

 

이 스타일을 적용할 컴포넌트에 

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

import를 해주고, 기존의 방시인 className = "nav"와 같이 텍스트형태가 아니라 

<nav className={styles.nav}>

자바스크립트 오브젝트에서의 프로퍼티형식으로 작성해주면 module.css의 nav가 적용이된다!

모듈울 사용하면 가장 큰 장점은 className이 랜덤한 고유문자로 들어가기때문에 어떠한 충돌도 일어나지않는다.

return (
    <nav className={styles.nav}>
      <Link href="/">
        <a className={router.pathname === "/" ? styles.active : ""}>Home</a>
      </Link>

      <Link href="/about">
        <a className={router.pathname === "/about" ? styles.active : ""}>
          About
        </a>
      </Link>
    </nav>
  );

=> 조건을 사용해 스타일을 주는방법 

그렇다면 하나의 엘리먼트에 2개의 CSS를 주고싶다면?

link를 기본으로 주고, active를 조건으로 주고싶은 경우!

 <a  className={`${styles.link} ${router.pathname === "/" ? styles.active : ""}`}>
     Home
 </a>

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

이렇게 2가지방식으로 사용하면된다.