没有重载将此调用与样式组件匹配

Question

我试图使用样式组件创建一个按钮组件，该组件需要一个道具as，可以是ComponentType | string当我尝试另一个名为skin或size的道具时，我得到错误No overload matches this call。我在谷歌上搜索了我能想到的一切。我已经尽力了。我最初没有在样式组件中使用attrs，但在谷歌搜索了几个小时后，我认为我需要使用它，但不确定。我错过了什么?

下面是Button组件:

const Button: FunctionComponent<FullProps> = ({
  as,
  children,
  skin = "primary",
  size = "medium",
  ...props,
}) => {
  return (
    <Component
      as={as}
      size={size}
      skin={skin}
      {...props}
    >
      {children}
    </Component>
  );
};

这是类型FullProps，它有所有的道具，但我试图减少它到最小的问题:

 export type FullProps = {
  as?: ComponentType | string;
  isFullWidth?: boolean;
  disabled?: boolean;
  shadow?: ShadowStep;
  size?: Size;
  skin?: Skin;
  theme?: Theme;
  type?: HtmlButtonType;
  href?: string;
  onClick?: () => void;
  children?: ReactNode;
  id?: string;
  loadingConfig?: LoadingConfig;
  icon?: IconConfig;
};

我知道当使用样式组件时，你应该使用道具forwardedAs来传递as值。这部分工作，如果我只有一个简单的组件，作为:

  const DemoALink = styled(Button)`
  color: white;
  background: #fb6058;
  height: 4rem;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
`;

下面是使用的样式组件:

    <DemoALink forwardedAs="a" skin="primary">
    Testings
  </DemoALink>

这是组件的样式:

export const Button = styled.button.attrs<FullProps>(
  ({ disabled, as, type }: FullProps) => ({
    type: as === "button" && type ? type : undefined,
    disabled,
  })
  // )<Required<FullProps> & { children: ReactNode }>`
)<Required<FullProps> & { children: ReactNode }>`
  ${baseStyles};
  ${({ skin, theme }) => getVariant({ skin, theme })}
  padding-top: ${getHeight};
  padding-bottom: ${getHeight};
  box-shadow: ${shadow};
  width: ${({ isFullWidth }: { isFullWidth: boolean }) =>
    isFullWidth ? "100%" : "auto"};
`;

Answer 1

我最近在尝试在样式组件中使用typescript时遇到了同样的错误。我最终解决了这个问题，并找到了出现这个错误的原因。我将看到一个上下文示例。

想象一下为一个角色组件声明一个类型，像这样:

 interface Avatar {
    src?: string,
    alt: string,
    height: string,
    width: string,
}

在期望的组件中使用这种类型声明是安全的，如下所示:

const AvatarContainer: FC<Avatar> = ({src, alt, width, height}) => {
    return (
        <Container width={width} height={height}>
            <img src={src} alt={alt} />
        </Container>
    )
};
export default AvatarContainer;
const Container = styled.div<{width: string, height: string}>`
width: ${(props) => props.width || '35px'};
height: ${(props) => props.height || '35px'};
overflow: hidden;
border-radius: 50%;
`;

请注意，上述操作将正常工作而不会出错。但是，要复制

没有重载匹配这个调用

错误，让我们修改上面的JSX为:

const AvatarContainer: FC<Avatar> = ({src, alt, width, height}) => {
    return (
        <Container width={width} height={height}>
            <img src={src} alt={alt} />
        </Container>
    )
};
export default AvatarContainer;
const Container = styled.div<Avatar>`
width: ${(props) => props.width || '35px'};
height: ${(props) => props.height || '35px'};
overflow: hidden;
border-radius: 50%;
`;

以上将出错。这是因为类型定义'Avatar'包含了另外两个我们的容器组件不需要的道具，src和alt。相反，我们要做的是显式地指定我们的容器组件所需的道具，正如我们在第一个代码示例中概述的那样。

希望这对你有帮助。

Answer 2

我是如何解决No overload matches this call错误在我的style -component:

interface Props{
    someProp: string
}
const SomeStyledComponent = styled.div<{ someProp: string}>`
    some-css-property: ${(props) => props.someProp}
`
export default function SomeCompnent({ someProp }: Props): ReactElement{
    return(
        <SomeStyledComponent someProp={someProp} />
    )
}