React-Native / StyledComponent 에서의 disabled 처리법

boolen값을 프롭스로 내려서 제어하는 것이아니라,  css 선택자를 사용해서  disabled 스타일 내에서 처리를 하고 싶었다. 

 

const ButtonContainer = styled.TouchableOpacity`

width: 100%;

height: 48px;

align-items: center;

justify-content: center;

border-radius: 50px;

flex-direction: row;

position: relative;

&:disabled {

background-color: ${color.separateGray};

}

`;

 

 

위처럼 진행하니 콘솔에 아래와 같은 오류가 발생함 

 

 

 

응 지원안해- 라는 소리 

 

 

 

const ButtonContainer = styled(TouchableOpacity)<{ disabled?: boolean }>`

background-color: ${(props) =>

props.disabled ? color.separateGray : color.black};

width: 100%;

height: 48px;

align-items: center;

justify-content: center;

border-radius: 50px;

flex-direction: row;

position: relative;

`;

 

 

불 ------ 편