Question

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

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

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

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

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

关于如何执行此操作的任何想法？

Answer 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}
`

在样式组件中扩展组件时更改标签类型

1 个答案: