Emotion props data 타입지정

여러 개의 CSS class 를 사용하여 스타일을 적용하는 것처럼, props 를 사용하여 특정 스타일을 부여했다.
하지만 TypeScript 를 사용하여 props 를 사용하면 다음과 같은 에러가 나온다.

'{ children: Element; topPosition: any; mouseOver: any; onMouseOver: () => any; onMouseLeave: () => any; }' 형식은 'IntrinsicAttributes & { theme?: Theme | undefined; as?: ElementType<any> | undefined; } & ClassAttributes<HTMLDivElement> & HTMLAttributes<...>' 형식에 할당할 수 없습니다.
  'IntrinsicAttributes & { theme?: Theme | undefined; as?: ElementType<any> | undefined; } & ClassAttributes<HTMLDivElement> & HTMLAttributes<...>' 형식에 'topPosition' 속성이 없습니다.ts(2322)

간단하게 <{data:type}> 의 타입 단언(Type Assertion)으로 해결할 수 있다.

export const LocalWindow = styled.div<{ topPosition: any, mouseOver: boolean }>`
  position: absolute;
  background-color: white;
  background-color: #f8f8f8;
  border-radius: 10px;
  box-shadow: 8px 6px 15px -3px rgb(0 0 0 / 48%);
  opacity: ${(props: any) => (!props.mouseOver ? "0" : "1")};
  z-index: ${(props: any) => (!props.mouseOver ? "-1" : "1")};
  transition: opacity 0.1s ease-in-out;
  width: 100px;
  top: 50px;
  right: 110px;
`;