tailwind template literal 사용 시 스타일 적용

문제 상황

tailwind를 사용하여 sns 로그인 버튼의 color를 sns의 종류에 맞게 설정하기 위해서 props로 color를 넘겨주고 템플릿 문자열을 사용했지만 color가 적용되지 않았다.

잘못된 코드

<button type="button" className={`bg-${bgColor} hover:bg-${hoverColor}`}/>

tailwind에서 background를 스타일링 하기 위해서는 앞에 bg를 붙여야 하는데 템플릿 문자열과 함께 쓰니 문제가 생겼다.

tailwind 공식 문서에 따르면 Dynamic class name을 설정할 때는 항상 완전한 클래스 이름으로 설정해야 한다.

존재하지 않는 클래스 이름은 생성하지 않기 때문이다.

props를 이용하여 color를 설정하고 싶다면 다음과 같이 설정한다.

function Button({ color, children }) {
  const colorVariants = {
    blue: 'bg-blue-600 hover:bg-blue-500',
    red: 'bg-red-600 hover:bg-red-500',
  }

  return (
    <button className={`${colorVariants[color]} ...`}>
      {children}
    </button>
  )
}

개선한 코드

<button type="button" className={`${bgColor} ${hoverColor}`}/>

부모 컴포넌트에서 완전한 클래스 이름을 넘겨주고 sns 버튼 컴포넌트에서는 완전한 클래스 이름을 넘겨받는다.