09컴퍼넌트스타일링 CSSModule을 활용한 클래스네임적용, global css 작성

global css를 활용할 수 있으며, 두개 이상의 클래스 적용시 ${styles.클래스명}으로 표기한다.

:global 대신 :local을 사용할 수도 있음

 

//CSSModule.moduel.css
.wrapper {
  background: black;
  padding: 1rem;
  color: white;
  font-size: 2rem;
}
.inverted {
  color: black;
  background: white;
  border: 1px solid black;
}

:global .something {
  font-weight: 800;
  color: aqua;
}

클래스목록이 많아질 경우 배열로 작성할수도 있다.

//CSSModule.js
import React from "react";
import styles from "./CSSModule.module.css";
const CSSModule = () => {
  console.log(CSSModule);
  return (
    <div className={`${styles.wrapper} ${styles.inverted}`}>
      안녕하세요, 저는 <span className="something">CSS Module</span>
    </div>
  );
};
export default CSSModule;