Как использовать настраиваемые реквизиты Typescript в стилизованных компонентах - PullRequest
Новая
       277

Как использовать настраиваемые реквизиты Typescript в стилизованных компонентах

1 голос
/ 03 августа 2020

У меня есть компонент Button, DayButton, который расширяет базовую кнопку Button и, наконец, компонент, который создает экземпляры DayButtons. 

//button.tsx

export const StyledButton = styled.button`
  ...
`;

export interface ButtonProps {
  children?: JSX.Element;
  onClick?: () => void;
}

function Button({ children, onClick }: ButtonProps): JSX.Element {
  return <StyledButton onClick={onClick}>{children}</StyledButton>;
}

//day-button.tsx

const StyledDayButton = styled(StyledButton)`
    ...
`;

export interface DayButtonProps extends ButtonProps {
    date: Date;
    notificationCount: number;
}

function DayButton({ onClick, date, notificationCount }: DayButtonProps): JSX.Element {
    return (
        <StyledDayButton onClick={onClick}>
//            <StyledDayText>{date.toLocaleString('default', { day: 'numeric' })}</StyledDayText>
//            <StyledNotificationContainer>
//                <NotificationIndicator />
//                <StyledNotificationCounter>{notificationCount}</StyledNotificationCounter>
//            </StyledNotificationContainer>
        </StyledDayButton>
    );
}

//day-picker.tsx

const StyledDayPicker = styled.div`
    ...
`;

function DayPicker(): JSX.Element {
    return (
        <StyledDayPicker>
            <DayButton date={new Date()} notificationCount={268} />
        </StyledDayPicker>
    );
}

Я хочу иметь возможность использовать «дату» prop в разделе стиля кнопки дня, например: 

//day-button.tsx


const StyledDayButton = styled(StyledButton)<DayButtonProps>`
    ...
    background-color: ${(props: DayButtonProps)=> someBoolFunction(props.date) && 'transparent'}
`;

К сожалению, я получаю это сообщение об ошибке: 

TypeScript error in /home/maplesyrup/git/seam/seam-frontend/src/components/shared/day-button.tsx(40,10):
No overload matches this call.
  Overload 1 of 2, '(props: Pick<Pick<Pick<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "form" | ... 264 more ... | "value"> & { ...; } & DayButtonProps, "form" | ... 267 more ... | "notificationCount"> & Partial<...>, "form" | ... 267 more ... | "notificationCount"> & { ...; } & { ...; }): ReactElement<...>', gave the following error.
    Type '{ children: Element[]; onClick: (() => void) | undefined; }' is missing the following properties from type 'Pick<Pick<Pick<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "form" | ... 264 more ... | "value"> & { ...; } & DayButtonProps, "form" | ... 267 more ... | "notificationCount"> & Partial<...>, "form" | ... 267 more ... | "notificationCount">': date, notificationCount
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<"button", DefaultTheme, DayButtonProps, never>): ReactElement<StyledComponentPropsWithAs<"button", DefaultTheme, DayButtonProps, never>, string | ... 1 more ... | (new (props: any) => Component<...>)>', gave the following error.
    Type '{ children: Element[]; onClick: (() => void) | undefined; }' is missing the following properties from type 'Pick<Pick<Pick<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "form" | ... 264 more ... | "value"> & { ...; } & DayButtonProps, "form" | ... 267 more ... | "notificationCount"> & Partial<...>, "form" | ... 267 more ... | "notificationCount">': date, notificationCount  TS2769

    38 | function DayButton({ onClick, date, notificationCount }: DayButtonProps): JSX.Element {
    39 |     return (
  > 40 |         <StyledDayButton onClick={onClick}>
       |          ^
    41 |             <StyledDayText>{date.toLocaleString('default', { day: 'numeric' })}</StyledDayText>
    42 |             <StyledNotificationContainer>
    43 |                 <NotificationIndicator />

Я что-то делаю неправильно с точки зрения синтаксиса? Я изучил ветку об этом в поисках решения, но не смог найти того, что работает.

...