[🔫][W-Guardian] Style-Component Conditional CSS

Styled-Component 조건부 CSS 설정하기

방법

const Container = styled.div<{ $bgcolor?: string }>`
  background-color: ${(props) =>
    props.$bgcolor === bgBright
      ? "#f6e8cf"
      : props.$bgcolor === bgCloudy
      ? "#dbe1da"
      : "#233947"};
`;

// API 데이터 받아와 props로 전달
<Container $bgcolor={weather[0].icon}>

삼항연산자 내부에 삼항연산자를 연달아 사용하는 건 가독성을 저하할 수 있어서 그다지 많이 쓰는 방법은 아니지만, styled-component에서 조건부로 CSS를 적용하기 위해 사용한다.

배경색을 받아온 API 결과에 따라 다르게 적용하기 위해 사용했는데 분기점이 2개였기 때문에 크게 가독성을 해치지 않는 선에서 활용할 수 있었다.

이슈 발생

1. Attribute 이름 대소문자 이슈

Warning: React does not recognize the bgColor prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase bgColor instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Attribute에 bgColor로 이름을 설정하고 값을 넘겼더니 React에서 prop으로 인식할 수 없다는 에러가 발생했다. DOM의 Custom Attribute로 의도적으로 만든 경우라면 모두 소문자로 변경하라고 알려줘서 이 부분을 수정했더니 해당 에러는 발생하지 않았고 조건부로 설정한 CSS도 잘 적용되는 것처럼 보였다(하지만 그건 착각이었다).

2. Styled-Component unknown prop 이슈

styled-components: it looks like an unknown prop "bgcolor" is being sent through to the DOM, which will likely trigger a React console error.
If you would like automatic filtering of unknown props, you can opt-into that behavior via
(connect an API like @emotion/is-prop-valid )
or consider sing transient props ($prefix for automatic filtering.)

styled-component에서 쓰기 위해 위에서 만든 custom attribute가 React 콘솔에서 에러를 발생시켰다. 즉, 조건부 CSS가 작동은 하지만 자동으로 필터링이 되는 것 같았다. 친절하게도 해결 방법이 이슈 제일 끝에 써있었고, 다른 블로그를 참고해서 문제를 해결했다.

  // 기존 코드
  const Container = styled.div<{ $bgcolor?: string }>`
  background-color: ${(props) =>
    props.bgcolor === bgBright
      ? "#f6e8cf"
      : props.bgcolor === bgCloudy
      ? "#dbe1da"
      : "#233947"};
`;

  <Container bgcolor={weather[0].icon}>
  
 // 수정 코드
 const Container = styled.div<{ $bgcolor?: string }>`
  background-color: ${(props) =>
    props.$bgcolor === bgBright
      ? "#f6e8cf"
      : props.$bgcolor === bgCloudy
      ? "#dbe1da"
      : "#233947"};
`;

<Container $bgcolor={weather[0].icon}>