如何在样式组件中使用 Typescript 自定义道具

Question

我有一个 Button 组件，一个扩展基本 Button 的 DayButton，最后是一个实例化 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>
    );
}

我希望能够像这样在日期按钮样式部分中使用“日期”道具：

//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 />

我在语法方面做错了吗？我已经探索了 thread 关于这个寻找解决方案，但一直无法找到一个有效的解决方案。

Answer 1

interface Props {
  schema: any;
  onSubmit: Function;
  [key: string]: any; // with any number of properties with any
}