Изменение типа тега при расширении компонента в Styled-Components

Question

У меня есть Styled-компонент с именем Headline, который я хочу расширить другим компонентом с именем SubHeadline.Теперь Headline выглядит следующим образом:

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

Я хотел бы как расширить стили заголовка, так и изменить тип тега на что-то другое (скажем, h3).Примерно так:

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

Теперь вышесказанное НЕ работает, но оно иллюстрирует то, что я хотел бы сделать.

Есть идеи о том, как это сделать?

Answer 1

Способ, которым я знаю, как управлять этим, описан в этом выпуске Github .Поместите всю свою функциональность в переменные и добавьте ее к своим дочерним компонентам:

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

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

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

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