Typescript + Styled-Components + Styled-System: No overload matches this call

Question

so I get the famous "No overload matches this call" error when using Typescript + Styled-Components + Styled-System.

The solutions I found so far require me to pass a generic type/interface to the styled component. Which I do with the ButtonProps. So what am I doing wrong?

Here is my code:

styled-system type imports

import {
  background,
  BackgroundProps,
  border,
  BorderProps,
  color,
  ColorProps,
  layout,
  LayoutProps,
  shadow,
  ShadowProps,
  typography,
  TypographyProps,
  variant
} from "styled-system"

Type declaration

interface VariantProps {
  variant: "submit" | "cancel"
}

type ButtonProps = BackgroundProps &
  BorderProps &
  ColorProps &
  LayoutProps &
  ShadowProps &
  TypographyProps &
  VariantProps

Styled component definition

const Button = styled.button<ButtonProps>`
  ${background}
  ${border}
  ${color}
  ${layout}
  ${shadow}
  ${typography}
  ${({
    disabled,
    theme
  }) => variant({
    variants: {
      submit: {
        background: theme.gradients.blue,
        border: "none",
        borderRadius: "sm",
        boxShadow: "0px 10px 5px -5px rgba(93,159,255, 0.3);",
        color: theme.colors.white,
        cursor: disabled ? "not-allowed" : "default",
        fontSize: "sm",
        fontWeight: 600,
        my: "16px",
        minHeight: "50px",
        opacity: disabled ? 0.5 : 1,
      }
    }
  })}
`;

Usage of the styled component and where the error occurs (<Button {...props}>)

const AnimatedButton: React.FC<ButtonProps> = ({
  children,
  ...props
}) => {
  return (
    <Button {...props}>
      {children}
    </Button>
  )
}

Screenshot of the error message

Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it *in the question itself*. See: "[How to create a Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example)". "[Why not upload images of code on SO when asking a question?](https://meta.stackoverflow.com/a/285557/128421)" and "[Discourage screenshots of code and/or errors](https://meta.stackoverflow.com/questions/303812)" are also pertinent. — the Tin Man, Feb 07 '22 at 04:56

score -3 · Answer 1 · answered Feb 03 '22 at 00:10

-3

Try this

const Button = styled(button)<ButtonProps>

answered Feb 03 '22 at 00:10

Cyrus Zei

2,589
1
27
37

Hey Mate, that can't work I guess, since ``button`` won't be defined. – codelifter Feb 03 '22 at 00:16
Ok, let me dig into this – Cyrus Zei Feb 03 '22 at 11:05
1

It helps more if you supply an explanation why this is the preferred solution and explain how it works. We want to educate, not just provide code. – the Tin Man Feb 07 '22 at 04:54
The solution is not working anyways. Couldn't find a solution so far. – codelifter Feb 08 '22 at 20:42

Typescript + Styled-Components + Styled-System: No overload matches this call

1 Answers1