[ReactJS] CSS module 사용할 때, className 여러 개 지정 및 className에 변수 넣는 방법

내가 구현하고 싶었던 것

최종 완성

나는 Button 컴포넌트를 따로 만들었고, Button의 background와 border의 색을 전역 변수로 지정해둔 상태였다.

그런데 '구글로 시작하기'와 '카카오로 시작하기' 버튼을 만들 때, Button 컴포넌트를 사용하되, background와 border의 색을 다르게 만들고 싶었다.

 

---

 

처음에 짠 코드(잘못된 코드)

Button.module.css

/* color */
.basicColor {
  background: rgba(var(--btn-rgb), 0.5);
  border: 1px solid rgba(var(--btn-border-rgb), 0.5);
}

/* google color */
.google {
  background: rgba(256, 256, 256, 0.5);
  border: 1px solid rgba(150, 150, 150, 0.5);
}

 

 

index.js - 구글로 시작하기 Button 부분.

 
        <Button
          href="/sign-up/"
          src="/google_logo.png"
          alt="Google Logo"
          width={50}
          height={50}
          description="구글로 시작하기"
          specificColor="google"
        />

 

Button.js의 일부

function Button(props) {
  
  let classColor;

  if(props.specificColor){
    classColor = props.specificColor;
  }else{
    classColor = basicColor;
  }
  
  return (
    <Link
      href={props.href}
      className={classes.button+' '+classes.classColor}
    >
 
 //생략...

 

 

그런데 이렇게 코드를 짜면 원하는대로 구현되지 않았다.

나는 여기서 무엇을 잘못한 걸까?

 

바로 이 부분이다!

  return (
    <Link
      href={props.href}
      className={classes.button+' '+classes.classColor}
    >

 

나는 여기서 두 가지 잘못을 했다.

 

1. className 다중으로 적용하는 방법을 잘못썼다.

css module을 쓸 때 className을 다중으로 적용하는 방법이 따로 있다.

 

2. classes뒤에 변수를 잘못 붙였다. 

classes.classColor는 classColor라는 변수명을 붙인 게 아니라 Button.module.css에서 .classColor를 찾는 꼴이 되어버렸다. 

 

이제부터 내가 잘못한 부분에 관해서 공부를 해보자.

---

css module 쓸 때 className을 여러개 지정하는 법

방법1.

className ={`${classes.class1} ${classes.class2}`}

 

방법2.

className={[classes.class1, classes.class2].join(" ")}

 

---

 

css module 쓸 때 className에 변수 넣는 방법

[ ]를 쓰면 된다!

 

let classColor라는 변수가 주어졌으면,

className = {classes[classColor]}

이렇게 작성하면 된다.

 

 

---

 

마무리

최종적으로 나는 다음과 같이 코드를 수정했다.

function Button(props) {
  
  let classColor;

  if(props.specificColor){
    classColor = props.specificColor;
  }else{
    classColor = basicColor;
  }
  
  return (
    <Link
      href={props.href}
      className={[classes.button, classes[classColor]].join(" ")}
    >

 

그랬더니 잘 작동되었다.