如何为单个Chakra标题元素中的文本设置不同的颜色

Question

我目前正在建立一个网站与Chakra UI和Typescript。主标题的最后一个字的颜色要与标题的其他部分不同。例如，在下面的代码片段中，C应该是与a和b不同的颜色。

<Heading as='h1' color='white'>A B C</Heading> 

我已经尝试了几种方法来解决这个问题，包括有多个标题元素和水平对齐它们与flex。但是，我发现这种方法的响应性问题和其他问题。

<Box display='flex'>
<Heading as='h1' color='white'>A B</Heading>
<Heading as='h1' color='blue.400'>C</Heading>
</Box>

你们建议怎么做?

Answer 1

我没有使用过Chakra UI，但我在常规html中使用了<span>，它可以实现这一点。

所以我在这里做了一个快速搜索，发现如何使用这样的<text>标签:<Text color='blue.400' as="span"> C </Text>这可能是一个潜在的解决方案。让我知道它是否有效!

Answer 2

最终嵌套了两个头，内部的头被设置为span，如下所示

<Heading as='h1' color='white'>A B <Heading as='span' color='blue'>C</Heading> </Heading>

这对我很有用。