[ReactJS] 컴포넌트 스타일링: css modules로 스타일링하기

summereuna🐥·2023년 4월 5일

React JS

목록 보기

41/69

💅🏻 css modules로 컴포넌트 스타일링하기

1. css 모듈을 사용하기 위해 import한다.

css 모듈을 사용하기 위해서는 이런식으로 css 파일을 임포트해야한다.

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

먼저 기존 css 파일을 파일명.module.css로 바꿔준다.
그리고 나서 파일명.module.css를 import 한다.
이는 css 모듈이 작동하도록 코드를 변환하라고 컴파일 프로세스에세 보내는 신호이다.
이때 css 모듈 파일은 styles 객체로 가져온다.

2. 클래스명을 설정한다.

클래스명을 css모듈을 가져올때 사용한 이름.파일 안에 있는 클래스 이름으로 설정한다.

className={styles.button}

📍 Button.js

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

const Button = (props) => {
  return (
    <button type={props.type} className={styles.button} onClick={props.onClick}>
      {props.children}
    </button>
  );
};

export default Button;

css 파일에서 설정한 css 스타일의 범위가 이 파일을 import하는 컴포넌트에 한정된다는 것을 확실하게 해준다.
그러려면 .button 클래스로 작업해야 한다. 임포트된 styles 객체의 클래스에 프로퍼티로 접근하기 때문이다.
css 모듈은 클래스 이름을 고유하게 바꾸는 작업을 하기 때문에 브라우저의 인스펙터를 확인하면 아래와 같이 클래스 이름이 고유하게 바뀐 것을 확인할 수 있다.
- 클래스 이름은 다음과 같이 구성된다.
  "컴포넌트이름_클래스 이름__고유한 해시값"

💅🏻 동적으로 컴포넌트 스타일링하기

클래스명에 -(대쉬)가 포함되어 있는 경우 어떻게 styles 프로퍼티로 가져올 수 있을까?

// styles["대쉬포함-클래스명"]
className={styles["form-control"]}

추가로 동적으로 클래스를 추가했다가 뺐다가 하기 위해서는 백틱(`)을 활용하여 아래 처럼 작성하면 된다.

// `${styles["form-control"]}`
className={`${styles["form-control"]}`}
// 동적으로 invalid 클래스 추가
className={`${styles["form-control"]} ${!isValid && styles.invalid}`}

💅🏻 미디어 쿼리 추가하기

📍 Button.module.css

.button {
  width: 100%;
  font: inherit;
  padding: 0.5rem 1.5rem;
  border: 1px solid #8b005d;
  color: white;
  background: #8b005d;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.26);
  cursor: pointer;
}

.button:focus {
  outline: none;
}

.button:hover,
.button:active {
  background: #ac0e77;
  border-color: #ac0e77;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.26);
}

/*for big devices*/
/*styled-component와 달리 css는 선택자가 필요하다!*/
@media (min-width: 768px) {
  .button {
    width: auto;
  }
}