Emotion CSS-in-JS Type declaration 2

생성일

Dec 5, 2021 01:26 AM

태그

TypeScript

Emotion

작성자

해결 완료

문제

새로운 CardContainer을 작성하는 데 있어 다음과 같은 오류가 발생했다.

'{ theme?: Theme | undefined; as?: ElementType<any> | undefined; } & ClassAttributes<HTMLElement> & HTMLAttributes<HTMLElement> & { ...; }' 형식에 'padding' 속성이 없습니다. '{ padding: string | number; }' 형식은 'IntrinsicAttributes & { css?: Interpolation<Theme>; } & { theme?: Theme | undefined; as?: ElementType<any> | undefined; } & ClassAttributes<...> & HTMLAttributes<...> & { ...; }' 형식에 할당할 수 없습니다. 'IntrinsicAttributes & { css?: Interpolation<Theme>; } & { theme?: Theme | undefined; as?: ElementType<any> | undefined; } & ClassAttributes<...> & HTMLAttributes<...> & { ...; }' 형식에 'padding' 속성이 없습니다.

기존의 코드는 다음과 같았다.


const StyledBoxCardContainer = styled.article`
  padding: ${({ padding }) =>
    typeof padding === 'string' ? padding : `${padding}px`};
`;

해결방법

다음 StackOverflow에서 해답을 찾았다.


const HeadingStyled = styled("h2")<IHeadingStyled>`
  ${props => props.emphasized && `
    display: inline;
    padding-top: 10px;
    padding-right: 30px;
  `}
`;

따라서 다음과 같이 코드를 입력하니 해결할 수 있었다.