[Typescript] styled-component에 props 전달 과정에서 오류 해결

interface TooltipProps {
    message: React.JSX.Element;
    percentage: number;

}
function Tooltip({message, percentage}:TooltipProps){
    return (
        <>
        <Rectangle percentage={percentage}>{message}</Rectangle>
        <Triangle></Triangle>
        </>
    )
}

const Rectangle = styled.div`
    width: 150px; 
    height: 48px; 
    position: absolute;
    left: ${props => `calc(${props.percentage}% - 75px)`}; //여기서 설정 //width/2
    bottom: 175%;
    background-color: white;
    color: black;

    font-weight: 600;
    text-align: center;
    padding-top: 0.5%;
`

 

여기서

이런 typescript에러가 떴다.

 

Tooltip 컴포넌트의 parameter의 type을 interface로 지정해줬음에도 불구하고!!

 

---

interface TooltipProps {
    message: React.JSX.Element;
    percentage: number;

}
function Tooltip({message, percentage}:TooltipProps){
    return (
        <>
        <Rectangle percentage={percentage}>{message}</Rectangle>
        <Triangle percentage={percentage}></Triangle>
        </>
    )
}
interface TooltipSizeProps {
    percentage: number;
}

const Triangle = styled.div<TooltipSizeProps>`
    width: 0; 
    height: 0; 
    border-left: 12px solid transparent; //
    border-right: 12px solid transparent ;  //
    border-top: 24px solid white;
    position: absolute;
    left: ${props => `calc(${props.percentage}% - 12px)`}; //여기서 설정 
    bottom: 100%;
`

const Rectangle = styled.div<TooltipProps>`
    width: 150px; 
    height: 48px; 
    position: absolute;
    left: ${props => `calc(${props.percentage}% - 75px)`}; //여기서 설정 //width/2
    bottom: 175%;
    background-color: white;
    color: black;

    font-weight: 600;
    text-align: center;
    padding-top: 0.5%;
`

styled-component에도 interface를 한번 더 적용시켜서 해결했다.