如何使用Styled Components创建动态标签？

这个需求完全可以实现，有两种成熟的落地方式，根据你的使用习惯选择即可：

• 使用官方内置as属性（推荐）
  styled-components v4及以上版本原生支持多态组件能力，内置的as属性就是专门用来动态切换渲染目标的，不需要额外修改封装逻辑，传入标签名或者其他自定义组件都能生效，且不会丢失已经绑定的样式。

// 正常封装样式组件即可
const MyComponent = styled(CustomTag)`
  font-weight: 600;
  line-height: 1.5;
`;

// 使用时通过as指定实际渲染的标签
<MyComponent as="h1">渲染为h1标签</MyComponent>
<MyComponent as="p">渲染为p段落标签</MyComponent>
// 也可以传入其他自定义组件作为渲染目标
<MyComponent as={CustomCard}>渲染为自定义Card组件</MyComponent>

• 适配自定义element属性名
  如果你希望和示例写法保持一致，用element作为控制标签的属性名，只需要通过.attrs做一层属性映射，把传入的element值绑定到内部识别的as字段上就行。

const MyComponent = styled(CustomTag).attrs(props => ({
  as: props.element
}))`
  font-weight: 600;
  line-height: 1.5;
`;

// 直接按你预期的写法使用即可
<MyComponent element="h1">渲染为h1标签</MyComponent>

踩坑提示 #

如果你的CustomTag是自定义函数组件，一定要做好属性透传：把接收到的className、as解析出的标签、其余DOM属性都传给最终渲染的根节点，否则会出现样式丢失、标签切换不生效的问题。
可参考的基础组件写法：

const CustomTag = ({ className, as: Tag = 'div', children, ...rest }) => {
  return <Tag className={className} {...rest}>{children}</Tag>
}

内容的提问来源于stack exchange，提问作者Felipe Gouvêa