[Next.js] module.css - 하나의 요소에 css className 여러 개 주기

1. 템플릿 문자열을 이용

2. 배열 사용 후 join을 이용해 공백 한 칸 두고 문자열로 합치기

.link {
  text-decoration: none;
}

.active {
  color: tomato;
}

1. 템플릿 문자열 이용

import Link from 'next/link';
import { useRouter } from 'next/router';
import styles from './NavBar.module.css';

export default function NavBar() {
  const router = useRouter();

  return (
    <nav>
      <Link href="/" className={`${styles.link} ${router.pathname === '/' ? styles.active : ''}`}>
        Home
      </Link>
      <Link href="/about" className={`${styles.link} ${router.pathname === '/about' ? styles.active : ''}`}>
        About
      </Link>
    </nav>
  );
}

2. 배열 사용 후 join을 이용해 공백 한 칸 두고 문자열로 합치기

import Link from 'next/link';
import { useRouter } from 'next/router';
import styles from './NavBar.module.css';

export default function NavBar() {
  const router = useRouter();

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