Как я могу создать общий компонент заголовка, используя стилизованную систему и стилизованные компоненты?
Следующее работает, но все мои заголовки используют тег h1.
import css from "@styled-system/css"
import styled from "styled-components"
import { color, ColorProps, textAlign, TextAlignProps, variant } from "styled-system"
type Props = {
level: 1 | 2 | 3 | 4 | 5 | 6
} & TextAlignProps &
ColorProps
const Css = css({
fontFamily: "heading",
fontWeight: "heading",
})
const Variant = variant({
prop: "level",
variants: {
1: {
fontSize: 7,
lineHeight: 7,
},
2: {
fontSize: 6,
lineHeight: 6,
},
3: {
fontSize: 5,
lineHeight: 5,
},
4: {
fontSize: 4,
lineHeight: 4,
},
5: {
fontSize: 3,
lineHeight: 3,
},
6: {
fontSize: 2,
lineHeight: 2,
},
},
})
const Heading = styled("h1")<Props>(Css, Variant, textAlign, color)
export default Heading
Я попытался создать компонент HeadingBase, например:
type Props = {
level: 1 | 2 | 3 | 4 | 5 | 6,
as: string | undefined
} & TextAlignProps &
ColorProps
const HeadingBase = ({ level, as: Component = `h${level}`, ...props }: Props) => <Component {...props} />
const Heading = styled(HeadingBase)<Props>(Css, Variant, textAlign, color)
Но я получаю сообщение об ошибке на <Component {...props} />
, потому что у него нет API для TextAlignProps и ColorProps.