Styled-Components 설계를 변경해야합니다.
interface를 선언한뒤 컴포넌트 props에 type을 interface로 지정해줄 때, styled component를 React.FC로 덮어쓸 필요가 없습니다. 심각한 오류를 발생시키는 것은 아니지만 필요 없는 덮어쓰기를 할 이유도 없습니다.
styled components가 받고 있는 props의 타입이 무엇인지 알려 줄 때, styled component를 React.FC로 만들 필요가 없습니다.
import React, { ReactNode } from "react";
import styled from "styled-components";
// 이 부분의 선언이 불필요 합니다.
const Button: React.FC<IButtonDefaultStyle> = styled.button<IButtonDefaultStyle>`
cursor: pointer;
font-size: 2rem;
border: 0;
padding: 0.8rem 1.3rem;
border-radius: 0.3rem;
color: ${(props) => props.theme.color.fontColorWhite};
background-color: ${(props) => props.theme.color.gray300};
`;
interface IButtonDefaultStyle
extends React.DetailedHTMLProps<
React.ButtonHTMLAttributes<HTMLButtonElement>,
HTMLButtonElement
> {
children: ReactNode;
}
const ButtonDefaultStyle: React.FC<IButtonDefaultStyle> = ({
children,
...props
}) => {
return <Button {...props}>{children}</Button>;
};
export default ButtonDefaultStyle;위와 같이 작성했을 때, interface에 커스텀 props를 작성한다면 다음과 같은 에러를 만날 수 있습니다.
No overload matches this call.
Overload 1 of 2, '(props: { color?: string | undefined; slot?: string | undefined; style?: CSSProperties | undefined; title?: string | undefined; ref?: ((instance: HTMLLIElement | null) => void) | RefObject<...> | null | undefined; ... 255 more ...; handler?: ((value: any) => any) | undefined; } & { ...; } & { ...; }): ReactElement<...>', gave the following error.
Type '{ children: Element[]; "data-id": string; onClick: (e: MouseEvent<HTMLLIElement, MouseEvent>) => void; }' is missing the following properties from type '{ color?: string | undefined; slot?: string | undefined; style?: CSSProperties | undefined; title?: string | undefined; ref?: ((instance: HTMLLIElement | null) => void) | RefObject<...> | null | undefined; ... 255 more ...; handler?: ((value: any) => any) | undefined; }': name, id, price
const Item: StyledComponent<"li", DefaultTheme, IProductItemProps, never>
No overload matches this call.
Overload 1 of 2, '(props: { color?: string | undefined; slot?: string | undefined; style?: CSSProperties | undefined; title?: string | undefined; ref?: ((instance: HTMLLIElement | null) => void) | RefObject<...> | null | undefined; ... 255 more ...; handler?: ((value: any) => any) | undefined; } & { ...; } & { ...; }): ReactElement<...>', gave the following error.
Type '{ children: Element[]; "data-id": string; onClick: (e: MouseEvent<HTMLLIElement, MouseEvent>) => void; }' is missing the following properties from type '{ color?: string | undefined; slot?: string | undefined; style?: CSSProperties | undefined; title?: string | undefined; ref?: ((instance: HTMLLIElement | null) => void) | RefObject<...> | null | undefined; ... 255 more ...; handler?: ((value: any) => any) | undefined; }': name, id, price
Overload 2 of 2, '(props: StyledComponentPropsWithAs<"li", DefaultTheme, IProductItemProps, never, "li", "li">): ReactElement<StyledComponentPropsWithAs<"li", ... 4 more ..., "li">, string | JSXElementConstructor<...>>', gave the following error.
Type '{ children: Element[]; "data-id": string; onClick: (e: MouseEvent<HTMLLIElement, MouseEvent>) => void; }' is missing the following properties from type '{ color?: string | undefined; slot?: string | undefined; style?: CSSProperties | undefined; title?: string | undefined; ref?: ((instance: HTMLLIElement | null) => void) | RefObject<...> | null | undefined; ... 255 more ...; handler?: ((value: any) => any) | undefined; }': name, id, pricets(2769)
위 에러는 복잡해보입니다. 하지만 메시지는 간단합니다. custom props에서 id, name, price가 필수 값이라고 알려줬는데 styled components에서 id, name, price�가 사용되고 있지 않다는 에러입니다.
해결할 수 있는 방법은 두가지가 있습니다. 커스텀 props를 옵셔널로 지정하는 방법과 stlyed components에서 사용할 props를 알려주기위한 interface를 따로 만들어서 styled-components에 알려주는 것입니다.
styled components에서 커스텀 props를 사용하기 위해서 interface 또는 types를 따로 선언하는 것을 권장하고 싶습니다. 왜냐하면 리액트 컴포넌트에 필수적으로 받는 props가 지정될 필요가 있기 때문입니다.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent