0

所以我在使用 Typescript + Styled-Components + Styled-System 时得到了著名的“没有重载匹配这个调用”错误。

到目前为止，我发现的解决方案要求我将泛型传递type/interface给样式化组件。我用ButtonProps. 那么我做错了什么？

这是我的代码：

样式系统类型导入

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

类型声明

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

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

样式化组件定义

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,
      }
    }
  })}
`;

样式化组件的用法和错误发生的位置( <Button {...props}>)

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

报错信息截图 过载错误

4

1 回答 1

-1

尝试这个

const Button = styled(button)<ButtonProps>

于 2022-02-03T00:10:08.040 回答