[에러] typescript, styled-components에서 boolean 타입의 props

상황: 중복투표를 하면 선택된 버튼의 색이 변경되도록 만들려고했다. 그러나 Focus를 이용해서 버튼의 색을 변경하면 1개의 버튼만 선택/변경되는 문제가 있었다. 따라서 cilcked라는 boolean 타입의 state를 만들고 선택된 버튼의 styled-components 속성 설정부분 안으로 props를 보내는데 에러가 발생하였다

원인: styled-components 안에서 props의 타입을 정의해줘야한다

해결방법:

export const SelectTextBtn = styled.button<{ clicked: boolean }>`
  border: 1px solid black;
  font-size: 1rem;
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
  margin-bottom: 0.5rem;
  background-color: ${(props) => (props.clicked ? '#4285f4' : 'white')};

출처: https://velog.io/@ecoco97/style-component-props%EC%99%80-typescript