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

【问题标题】：No overload matches this call with styled components没有重载将此调用与样式化组件匹配
【发布时间】：2021-04-21 08:10:11
【问题描述】：

我正在尝试使用样式组件创建一个按钮组件，该组件接受一个可以是 ComponentType | string 的道具 as 当我尝试另一个名为 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"};
`;

【问题讨论】：

标签： javascript typescript styled-components

【解决方案1】：

这是我解决样式组件中的No overload matches this call 错误的方法：

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

【讨论】：

【解决方案2】：

我最近在尝试在样式化组件中使用 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' 包含另外两个 props，src 和 alt，我们的 Container 组件不需要。相反，我们想要做的是明确指定我们的 Container 组件需要的 props，如我们的第一个代码示例中所述。

我希望这会有所帮助。

【讨论】：