TypeScript下无状态组件Styled-Components Props类型检查报错求助

这个类型错误的根源是styled-components无法自动正确推断你自定义组件的props类型，尤其是altStyle这个属性。当你把PrimaryButton传给styled()时，TypeScript默认会把插值函数的props推断为ThemedStyledProps，而不是你定义的IProps，导致类型不匹配报错。不用any也能完美解决，这里有几个可行的方案：

方案1：给styled组件显式指定props泛型，并更新组件类型定义 #

你可以通过给styled()添加泛型参数，明确告诉它你的组件props类型，同时用React官方推荐的React.FC替代过时的StatelessComponent，让类型推断更准确：

import React from 'react';
import styled, { css, keyframes } from 'styled-components';

interface IProps {
  altStyle?: boolean;
  className?: string;
  name: string;
  type?: string;
}

// 使用React.FC替代StatelessComponent，同时在参数中设置默认值替代defaultProps
const PrimaryButton: React.FC<IProps> = ({
  className,
  type = 'button',
  name,
  altStyle = false,
}) => (
  <button className={className} type={type}>
    <span>{name}</span>
  </button>
);

const hoverAnimation = keyframes`
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
`;

// 关键：给styled指定<IProps>泛型，让插值函数的props正确推断为IProps类型
const StyledPrimaryButton = styled(PrimaryButton)<IProps>`
  background: linear-gradient(135deg, #b60c41, #b30d41, #51213c);
  border: none;
  border-radius: 0;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  height: 45px;
  letter-spacing: 2px;
  padding: 0 28px;
  position: relative;
  text-transform: uppercase;

  > span {
    position: relative;
  }

  &:before {
    background: #51213c;
    bottom: 0;
    content: "";
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
  }

  &:hover:before {
    animation: ${hoverAnimation} 2s ease-in-out infinite alternate;
  }

  ${(props) => props.altStyle && css`
    background: transparent;
    border: solid 2px #fff;
    transition: background 1s ease;

    &:hover {
      background: #b60c41;
      border: none;
      padding: 0 30px;
    }

    &:hover:before {
      animation-delay: 1s;
    }
  `}
`;

export default StyledPrimaryButton;

为什么这个方案有效： #

• React.FC是当前React官方推荐的函数组件类型，相比StatelessComponent有更完善的类型推断能力，和styled-components的类型系统兼容性更好。
• 显式指定styled(PrimaryButton)<IProps>的泛型参数，让styled-components准确识别你的props结构，插值函数里的props就会被正确推断为IProps，解决类型不匹配问题。
• 把defaultProps的默认值移到函数参数中，既符合函数式组件的写法，又能让TypeScript正确识别默认值的类型。

方案2：直接基于原生元素创建样式组件（更简洁） #

如果你的组件没有复杂的逻辑，只是封装按钮样式，推荐直接用styled.button创建样式组件，再封装成自定义组件，这样能避免自定义组件传给styled时的类型推断问题：

import React from 'react';
import styled, { css, keyframes } from 'styled-components';

interface IProps {
  altStyle?: boolean;
  name: string;
  type?: string;
}

const hoverAnimation = keyframes`
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
`;

// 直接基于原生button创建样式组件，并指定<IProps>泛型
const StyledButton = styled.button<IProps>`
  background: linear-gradient(135deg, #b60c41, #b30d41, #51213c);
  border: none;
  border-radius: 0;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  height: 45px;
  letter-spacing: 2px;
  padding: 0 28px;
  position: relative;
  text-transform: uppercase;

  > span {
    position: relative;
  }

  &:before {
    background: #51213c;
    bottom: 0;
    content: "";
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
  }

  &:hover:before {
    animation: ${hoverAnimation} 2s ease-in-out infinite alternate;
  }

  ${(props) => props.altStyle && css`
    background: transparent;
    border: solid 2px #fff;
    transition: background 1s ease;

    &:hover {
      background: #b60c41;
      border: none;
      padding: 0 30px;
    }

    &:hover:before {
      animation-delay: 1s;
    }
  `}
`;

// 封装成自定义组件，处理props和内容
const PrimaryButton: React.FC<IProps> = ({ name, type = 'button', altStyle = false }) => (
  <StyledButton type={type} altStyle={altStyle}>
    <span>{name}</span>
  </StyledButton>
);

export default PrimaryButton;

这个方案的优势： #

• 代码更简洁，避免了自定义组件和styled组件之间的类型传递问题。
• 直接操作原生元素的样式，类型推断更直接，减少出错概率。

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