在扩展样式组件上使用样式组件道具时丢失组件道具'as'

Question

我写了一个CallToAction组件，像这样:

const CallToAction = ({ text = "Default text" }) => (
<S_CallToAction>{text}</S_CallToAction>
)
const S_CallToAction = styled.div`
// Some styles...
`
export default CallToAction

然后，当我想在其他组件中使用它并使用更多样式重载它时，我失去了我的"text"以及之前我在calltoaction中声明的样式组件。当我删除"as={'button'}"道具。

当我想在另一个组件中使用它时，我所做的是重载它:

import CallToAction from "components/common/callToAction"

…

<S_ProductButton
as={'button'}
text={`I want my text to display and my style being inherited`}
/>

…

const S_ProductButton = styled(CallToAction)`
width: 50%;
margin: auto;
min-width: 300px;
`

谁能解释一下为什么要加"道具都使我的样式重载和我的文本道具不再工作了吗?另外，你是如何处理这种情况的?

注意:我是样式组件的新手…我可以导出s_calltoaction;(仅样式)并在我的其他组件中使用它，但这是一个很好的解决方案吗?这将打破"一个组件=一种样式"的概念。

Answer 1

好了，我终于找到解决问题的办法了!我的用例中还有一个道具">forwardedAs";用作"as"这使得我的重载的样式组件按预期工作。

我必须通过{…我的CallToAction组件(它最初是一个style .a)

const CallToAction = ({ text = "Text", href, ...props}) => (
<S_CallToAction href={href ? href : null} {...props}>{text}</S_CallToAction>
)

然后在扩展组件上，我必须使用forwardedAs:

<S_ProductButton
forwardedAs={'button'}
text={`I have my text and my styles inherited`}
/> 

详细信息关于我所面临的问题，以及为什么样式组件的行为是这样的:https://github.com/styled-components/styled-components/issues/1981