Javascript 基于Chakra UI组件的变体创建React组件

我正在尝试使用chakra ui:中的

标题和
文本创建一些排版组件。我的想法是，这些组件包含了我想要在一个组件中包含的所有行高、字母间距、字体大小和其他样式

因此，例如，
组件的
字体大小
为96px，
行高
为100%，等等。
组件的
字体重量
和
行高
为72px。等等

现在，这是可行的，但它没有我想要的那么优雅。理想情况下，我想要这样的东西：

<Heading level="d1">Display One</Heading>
<Heading level="d2">Display Two</Heading>
<Heading level="d3">Display Three</Display>
...
<Text level="small">Small Text</Text>
...

import { Heading as HeadingBase, Text as TextBase } from '@chakra-ui/core'```

export const Heading = (props) => {
  if (props.level === "d1") {
     return <Heading fontSize="96px"...>{props.children}</Heading>
} else if (props.level === "d2") { ... }
 ...
}
}

显示一个
显示两个
显示三个
...
小文本
...

换句话说，与其拥有多个组件，不如拥有一个带有道具的组件来控制变化。不过，我在想如何让它发挥作用时遇到了麻烦

现在，我的代码是这样的：

import { Heading, Text } from '@chakra-ui/core'

const TextBase = ({ children, ...rest }) => (
  <Text color="darkGrey" fontWeight="semibold" lineHeight="base">
    {children}
  </Text>
)

const HeadingBase = ({ children, ...rest }) => (
  <Heading color="dark" fontWeight="bold" letterSpacing="tight">
    {children}
  </Heading>
)

// Display
export const DisplayOne = ({ children, ...rest }) => (
  <HeadingBase fontSize="96px" lineHeight="100%" {...rest}>
    {children}
  </HeadingBase>
)

export const DisplayTwo = ({ children, ...rest }) => (
  <HeadingBase fontSize="88px" lineHeight="100%" {...rest}>
    {children}
  </HeadingBase>
)

...

// Text
export const BodyText = ({ children, ...rest }) => (
  <TextBase fontSize="md" {...rest}>
    {children}
  </TextBase>
)

export const SmallText = ({ children, ...rest }) => (
  <TextBase fontSize="sm" {...rest}>
    {children}
  </TextBase>
)
...

从“@chakra ui/core”导入{标题，文本}
const TextBase=（{children，…rest}）=>(
{儿童}
)
const HeadingBase=（{children，…rest}）=>(
{儿童}
)
//展示
export const DisplayOne=（{children，…rest}）=>(
{儿童}
)
export const displaytow2=（{children，…rest}）=>(
{儿童}
)
...
//正文
导出常量BodyText=（{children，…rest}）=>(
{儿童}
)
export const SmallText=（{children，…rest}）=>(
{儿童}
)
...

不过，我想做的是这样的：

<Heading level="d1">Display One</Heading>
<Heading level="d2">Display Two</Heading>
<Heading level="d3">Display Three</Display>
...
<Text level="small">Small Text</Text>
...

import { Heading as HeadingBase, Text as TextBase } from '@chakra-ui/core'```

export const Heading = (props) => {
  if (props.level === "d1") {
     return <Heading fontSize="96px"...>{props.children}</Heading>
} else if (props.level === "d2") { ... }
 ...
}
}

从“@chakra ui/core”导入{Heading as HeadingBase，Text as TextBase}```
导出常量标题=（道具）=>{
如果（道具等级==“d1”）{
返回{props.children}
}如果（props.level==“d2”）{…}
...
}
}

然而，这似乎相当复杂，不是很枯燥，我想知道是否有一个更简单和/或更优雅的方式来做到这一点

有什么想法吗

谢谢。
您可以使用键d1、d2、d3创建一个包含道具/样式的对象，然后根据道具将这些样式应用于组件，类似于