Question

我正在尝试使用样式化组件创建一个按钮组件，该组件带有一个属性 as，它可以是一个 ComponentType | string 当我尝试另一个名为 skin 或 size 的属性时，我得到错误 No overload matches this call。我用谷歌搜索了我在阳光下能想到的东西。我已经尽我所能。我最初没有在样式组件中使用 attrs 但在谷歌搜索几个小时后我认为我需要使用它但不确定。我错过了什么？

这是按钮组件：

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

以下是我解决样式组件中 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} />
    )
}

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

我希望这会有所帮助。

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

2 个答案: