[🐋 CSS] Styled Components & TypeScript - 컴포넌트에 props 값 전달하기

고민한 문제

스타일 컴포넌트 & 타입 스크립트로 프로젝트를 진행하던 도중에
해당 스크롤 위치 조건을 달성한 경우에, 컴포넌트를 고정시키고 싶었다.

하지만 일반 리액트로 진행하는 것처럼 props로 단순 조건문에 의해서 props를 전달해주었더니 CSS 속성이 제대로 입혀지지 않았다.

해결과정

컴포넌트 생성시 태그 우측에 props 타입을 정의해야 한다.
fixBar의 값은 useState로 스크롤 감지시 Y축의 값을 반환한다.

const Box = styled.div<{inverted:boolean}>` // 여기! 
  position: ${(props)=> (props.inverted ? 'fixed':'absolute')};
  left: ${(props)=> (props.inverted ? '87%':'87%')};
  top : ${(props)=> (props.inverted ? '60%':'1200px')};
`

//...//

<Box inverted = { fixBar < 700 ? true : false }>