如何在styled-components中扩展多组件样式并替换HTML元素

我来帮你分析下问题所在，以及对应的解决办法：

首先，你的Card组件是一个没有接收任何props的函数组件，它直接返回了硬编码的<span>There is content</span>。当你使用withComponent替换标签时，styled-components本质是替换组件的根渲染节点，但因为你的Card没有对外暴露props（比如className），也没有让根元素接收这些props，更没有把内容通过children传递，所以替换成button后，原来的内容就丢失了——新的button标签没有地方去渲染原来Card里的硬编码内容。

解决方案一：修改Card组件支持props传递 #

最简单的办法是让Card接收className并传递给根元素，这样styled-components的样式能正确应用，同时withComponent替换标签后也能保留内部内容：

// 修改后的Card组件
const Card = ({ className }) => <span className={className}>There is content</span>

// 你的原有组件不变
const CardItem = styled(Card)`
  background-color: red;
`
const Card2 = styled(CardItem)`
  background-color: green;
`

// 现在Card3的写法就能正常工作了
const Card3 = Card2.withComponent('button').extend`
  pointer-events: none;
`

现在Card3会渲染成带所有继承样式的<button>，并且内部保留There is content的内容。

解决方案二：不修改原有组件，用css辅助函数继承样式 #

如果不想改动原来的Card组件，可以用styled-components的css工具来继承Card2的样式，直接基于button创建新组件：

import styled, { css } from 'styled-components';

// 原有组件保持不变
const Card = () => <span>There is content</span>
const CardItem = styled(Card)`
  background-color: red;
`
const Card2 = styled(CardItem)`
  background-color: green;
`

// 继承Card2的样式，基于button创建Card3
const Card3 = styled.button`
  ${css`${Card2}`}
  pointer-events: none;
`

// 使用时把Card的内容传入
<Card3>There is content</Card3>

如果想避免重复写内容，可以把Card的内容抽成单独的组件复用：

const CardContent = () => <>There is content</>;

const Card = () => <span><CardContent /></span>;
const CardItem = styled(Card)`
  background-color: red;
`;
const Card2 = styled(CardItem)`
  background-color: green;
`;
const Card3 = styled.button`
  ${Card2}
  pointer-events: none;
`;

// 使用
<Card><CardContent /></Card>
<Card3><CardContent /></Card3>

总结 #

核心问题在于原始Card组件没有接收styled-components传递的props，也没有通过可复用的方式暴露内部内容。上面两种方案都能解决你的需求：要么让Card支持props传递，要么通过css工具继承样式并重新基于目标标签创建组件。

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