231002 개발일지 TIL - JavaScript 템플릿 리터럴을 사용하여 CSS 스타일 조건부 설정

JavaScript 템플릿 리터럴을 사용하여 CSS 스타일 조건부 설정

.iGiRYI button {
  ${({ theme }) => {
    if (theme === 'dark') {
      return {
        color: '#fff',
        background: '#2E2E2E',
      };
    } else if (theme === 'light') {
      return {
        color: '#2E2E2E',
        background: '#fff',
      };
    } else {
      return {
        color: '#2E2E2E',
        background: '#fff',
      };
    }
  }}
}

위 코드에서는 템플릿 리터럴 안에 JavaScript를 넣어 조건문을 사용하여 theme 값에 따라 다른 CSS 스타일을 반환한다. 이렇게 하면 동적으로 스타일을 변경할 수 있으며, 테마가 바뀔 때 UI 요소의 스타일을 쉽게 조절할 수 있다. 코드의 가독성과 유지보수성도 향상시킬 수 있다.