How do I use Typescript custom props in styled-components

Question

I have a Button component, a DayButton which extends the base Button and finally a component which instanciates 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>
    );
}

I want to be able to use the 'date' prop in the day-button styling section like so:

//day-button.tsx


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

Unfortunately, I get this error message:

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

Am I doing anything wrong in terms of syntax? I have explored the thread about this looking for a solution but haven't been able to find one that works.

Answer 1

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