Reactjs 在样式化组件中扩展组件时更改标记类型

我有一个名为

Headline

的样式化组件，我希望用另一个名为

SubHeadline

的组件扩展它。现在，

Headline

看起来像这样：

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

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

我想做的是扩展标题的样式，并将标签类型更改为其他类型（比如h3）。大概是这样的：

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

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

现在，上述方法不起作用，但它说明了我想做什么

---

关于如何做到这一点有什么想法吗？

中介绍了我知道如何管理这一点的方法。 将所有功能放在变量中，并将其添加到不同的子组件中：

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路由器的链接-dom@TiagoDamascena另一个好方法是像这样更改jsx中的类型：

Submit

。但在使用每个组件时，都必须这样做。但如果您将其作为

链接

样式的组件，但需要外部链接，则会很有帮助。