React: CSS Error

발생

• css 적용 후 에러

원인

• next.js의 문서를 살펴보니 일반 css 적용 불가
  • ☞ next.js css 관련 참고 문서

해결

• 여러 해결 방법 중 css module화 방법 사용(이름.module.css)
  • ☞ next.js css module 참고 코드

주의사항

• className 작성시 {}(괄호) 사용!
• ""(따옴표) 사용 시 에러문구가 안 떠서 문제점 바로 알 수 없음, 자동 생성으로 인해 쉽게 발생하는 에러

틀린 방법("", 따옴표 사용)

import styles from "css 위치";

const Hello1 = () => {
  return (
    <div className="styles.className">
      Hello World!
    </div>
  )
};
          

옳은 방법({}, 중괄호 사용)

import styles from "css 위치";

const Hello2 = () => {
  return (
    <div className={ styles.className }>
    Hello World!
    </div>
  )
};