[React] CSS module 적용방법(id,class) 과 주의사항

적용방법

문자중간에 기호가 없을경우에는 

id -> id={styles.Hello} 

className -> className={styles.Hello}

이런식으로 작성하며 

---

중간에 (-), (_)기호가 들어갔을시에는 

id -> id={styles["Hello-Kim"]} 

className -> className={styles["Hello-Kim"]}  

 

이런식으로 작성합니다.

---

또한 밑과같이 control 옆 active 사이에 스페이스 상태로 사용하면 적용이 안되는것 같으니 참고해야 될 것 같습니다.

<a href="#none" className={styles["btn_eventControl active"]}>

---

주의사항

주의사항으로는 예를들면 바로밑 사진과 같이 SimpleSlider.js 이렇게 모듈파일이라고 해도 style 적용시에 

위 사진의 <h2> 부분과 <h3> 과 같이 css module이 적용이 안되어 있으면 module 이 적용안되어서 전체 파일 css에있는 <h2>에 공통적으로 적용되니까 주의해야 합니다.

 

{styels.module} 즉 모듈을 적용하지 않아서 <h2>이름이 고유성으로 적용되지 않아서 module이 적용되지 않은모습입니다.

 

또한 모듈을 적용해놔도 해당모듈에 css 를 적용하지 않으면 바로 밑사진과 같이 X표시한것처럼 css module이 적용되지 않은 모습을 볼 수 있습니다.

 

그리고

이사진에서는 모듈에 css까지 마무리해서 css module이 적용된 모습입니다.