styled-components props와 theme을 동시 사용

✔️ 필요성

styled-components에서 props를 받아서 그 값에 따라 다르게 컴포넌트를 꾸미는 방법이 있다. 자세한 건 아래 포스팅을 참고!

Styled-Components로 React Native Pressable 꾸미기

props 값을 받아서 props 값에 따라 theme에 있는 컬러를 가지고 오고 싶을 때는 어떻게 하나?

 

 

✔️ 문제 상황

내가 하고 싶은건 pressed props를 받아서 pressed 값이 true 일때는 theme의 라이트그레이 색상을 사용하고, pressed 값이 false일 때에는 theme의 화이트 색상을 사용하고 싶다.

 

그런데 이 때 props의 이름을 찾을 수 없다고 하면서 에러가 났다.

 

 

 

✔️ 해결

이 때는 컬러를 지정할 때 props 값과 theme에 대한 함수를 만들어서 짜면 된다! 

const DowBox = styled.View<{pressed: boolean}>`
  background-color: ${({pressed, theme}) =>
    pressed ? theme.colors.lightGrey : theme.colors.white}
`;

 

 

눌렀을 때 배경 색깔이 바뀌는 것을 구현하고 싶을 때는 유사하게 아래처럼 만들 수 있다.

const DowBox = styled.View<{pressed: boolean; isSelected: boolean}>`
  background-color: ${({isSelected, theme}) =>
    isSelected ? theme.colors.lightGrey : theme.colors.white}
`;

 

 

 

---

✔️ 덤

아래 두 코드는 같은 코드이다

padding: ${({iconExist}) => (iconExist ? "0 44px 0 11px" : "0 11px")};

padding: ${(props) => (props.iconExist ? "0 44px 0 11px" : "0 11px")};