使用styled-components开发React组件时出现Prop TypeScript错误如何解决？

问题原因 #

原生<a>标签没有标准disabled属性，TypeScript内置的AnchorHTMLAttributes类型定义中不存在该字段，你定义的TextLinkProps里的disabled没有同步给StyledLink组件，TS无法识别这个自定义属性，因此抛出类型错误。

解决方案 #

方案1：显式给styled组件绑定属性类型（快速适配） #

直接通过泛型给StyledLink声明接受disabled属性即可解决类型报错，同时补充禁用态的交互样式避免用户点击后跳转：

const StyledLink = styled.a<Pick<TextLinkProps, 'disabled'>>`
  color: blue;
  ${({ disabled }) => 
    disabled &&
    css`
      color: gray;
      pointer-events: none; /* 阻止点击跳转 */
      cursor: not-allowed; /* 禁用态鼠标样式 */
    `}
`;

方案2：使用瞬时Props（更规范，推荐） #

styled-components支持$开头的瞬时属性，这类属性不会透传到最终渲染的DOM节点上，不会出现非标准属性的HTML校验警告，更符合规范：

// 声明StyledLink接受$disabled瞬时属性
const StyledLink = styled.a<{ $disabled?: boolean }>`
  color: blue;
  ${({ $disabled }) => 
    $disabled &&
    css`
      color: gray;
      pointer-events: none;
      cursor: not-allowed;
    `}
`;

export type TextLinkProps = {
  /**
   * text to be passed in as a link
   */
  link: string;
  /**
   * text to be rendered in the component.
   */
  children: React.ReactNode;
  /**
   * If `true`, color will be gray.
   */
  disabled?: boolean;
};

export function TextLink({ children, link, disabled = false }: TextLinkProps) {
  return (
    {/* 传入瞬时属性 */}
    <StyledLink href={link} $disabled={disabled}> 
      {children}
    </StyledLink>
  );
}

内容的提问来源于stack exchange，提问作者Eric Nguyen