使用Styled Components(TypeScript)创建Material Icons组件遇TS报错求助

你遇到的这个错误是TypeScript的语法解析问题——当你在styled.i后面直接加泛型<MetaIconProps>再链式调用.attrs时，TypeScript会把这个结构判定为非法的语法组合。

有两种简单的修复方式：

方式一：把泛型参数传递给.attrs方法 #

直接将MetaIconProps作为.attrs的泛型参数传入，这样语法就符合TypeScript的要求了：

export default styled.i.attrs<MetaIconProps>({
  className: 'material-icons'
})`
  width: ${(props) => getSize(props.size)};
  height: ${(props) => getSize(props.size)};
  font-size: ${(props) => getSize(props.size)};
`;

方式二：拆分组件定义 #

先创建带泛型的基础<i>组件，再链式调用.attrs添加属性，这样也能避开语法解析问题：

const BaseIcon = styled.i<MetaIconProps>``;

export default BaseIcon.attrs({
  className: 'material-icons'
})`
  width: ${(props) => getSize(props.size)};
  height: ${(props) => getSize(props.size)};
  font-size: ${(props) => getSize(props.size)};
`;

两种方式都能实现你要的效果：通过attrs设置固定的className，同时让组件支持MetaIconProps里的自定义属性。

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