styled-componets

css in js로 react의 state를 직접 전달하여
css를 직접 조작할 수 있다는 장점이 있다

props 전달

전달한 props에 대해 타입을 미리 정의하고
styled components에서 props 사용

interface InputProps {
  readonly place: string;
}

<SignUpInput
          type="text"
          value={userId}
          // @ts-ignore
          place='아이디'
          onChange={inputUserIdChange}
          ref={userIdRef}
        />

const SignUpInput = styled.input.attrs<InputProps>(
  ({place}) => ({
    placeholder: `${place}`
  })
)`
  width: 50%;
`

SignUpInput의 place에서 대해 타입스크립트가
타입 추론을 못하고 있어 방법을 찾아야한다..

interface IDiv {
  isActive: boolean;
  height: string;
}

const Div = styled.div<IDiv>`
  height: ${props => props.height};
  background-color: ${(props) => (props.isActive ? 'red' : 'gray')};
`;