TypeScript中为styled-components组件动态赋值name属性报错的原因是什么

核心报错原因 #

• 你当前使用styled-components创建的Arrow组件是基于原生<div>元素封装的，而原生<div>的标准DOM属性定义中本身不存在name属性，name仅属于<input>、<button>等表单类元素的原生属性。
• role和aria-*前缀的属性属于无障碍全局标准属性，所有HTML元素都支持传入，所以这两个属性赋值不会触发类型报错。
• styled-components生成的组件默认继承其底层原生元素的TS类型定义，TS在校验属性合法性时，识别到你给div类型的组件传入了不存在的name属性，就会抛出该错误。

常用解决方案 #

方案1：修改底层元素为button（最推荐） #

你已经给元素加了role="button"，语义上本身就是可交互按钮，直接将styled的底层元素替换为原生<button>即可，原生button自带name属性，无需额外改类型：

// styles/header.ts里修改Arrow的定义
const Arrow = styled.button`
  /* 原有样式代码，可补充重置原生按钮默认样式 */
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
`;

方案2：给styled组件扩展自定义属性类型 #

如果确实需要保留div作为底层元素，可以给styled组件显式声明允许传入name属性：

// styles/header.ts里修改Arrow的定义
const Arrow = styled.div<{ name?: string }>`
  /* 原有样式代码 */
`;

方案3：临时绕过类型校验（不推荐） #

如果只是临时调试不想改动类型定义，可以用类型断言绕开校验：

<Arrow
  role="button"
  name={action === 'previous' ? 'previous' : 'next'}
  aria-label={action === 'previous' ? 'previous' : 'next'}
  {...restProps as any}
/>

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