在 Styled-Components 中扩展组件时更改标签类型

【问题标题】：Changing Tag Type When Extending Component in Styled-Components在 Styled-Components 中扩展组件时更改标签类型
【发布时间】：2020-10-03 08:46:23
【问题描述】：

我有一个名为Headline 的样式化组件，我希望用另一个名为SubHeadline 的组件对其进行扩展。现在，Headline 看起来像这样：

const Headline = styled.h2`
// Css styles go here
`

我想做的是扩展 Headline 的样式并将标签类型更改为其他类型（例如 h3）。像这样的：

const SubHeadline = styled(Headline).h3`
// Css styles go here
`

现在上述方法不起作用，但它说明了我想做的事情。

关于如何做到这一点的任何想法？

【问题讨论】：

标签： reactjs styled-components

【解决方案1】：

this Github Issue 中描述了我知道如何管理此问题的方法。将所有功能放入变量中，并将其添加到不同的子组件中：

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

const HeadlineStyles = css`
  // Css for Headline here
`

const Headline = styled.h2`
  ${HeadlineStyles}
`

const SubHeadline = styled.h3`
  ${HeadlineStyles}
`

【讨论】：

谢谢 - 会做到的。
这是我找到的制作按钮组件的最佳解决方案，它可以是简单的“a”标签或来自 react-router-dom 的链接
@TiagoDamascena 另一个好方法是像这样更改 jsx 中的类型：<YourButton as="a">Submit</YourButton>。但是当你使用它时，你必须对每个组件都这样做。但是，如果您将其作为 Link 样式的组件但需要外部链接，则会很有帮助。