typescript 如何在一个脉轮标题元素内设置不同的文本颜色

mnemlml8 于 2023-01-14 发布在 TypeScript

关注(0)|答案(2)|浏览(193)

我目前正在用脉轮UI和Typescript构建一个网站。主标题的最后一个字要和标题的其他部分颜色不同。例如，在下面的代码片段中，C应该和A、B颜色不同。

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

我已经尝试过几种方法来解决这个问题，包括使用多个header元素和使用flex水平对齐它们，但是，我发现这种方法存在响应问题和其他问题。

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

你们有什么建议？

typescript

来源：https://stackoverflow.com/questions/75076196/how-to-set-different-colors-for-text-within-a-single-chakra-heading-element

2条答案

按热度按时间

9gm1akwq1#

我没有使用过脉轮用户界面，但我在常规HTML中使用过<span>，它可以完成这一点。
所以我在这里做了一个快速的搜索，找到了如何像这样使用<text>标签：<Text color='blue.400' as="span"> C </Text>这可能是一个潜在的解决方案。让我知道它是否有效！

赞(0）回复(0）举报 2023-01-14

y4ekin9u2#

最后嵌套了两个标头，内部标头被设置为一个范围，如下所示
<Heading as='h1' color='white'>A B <Heading as='span' color='blue'>C</Heading> </Heading>
这对我很有效。

赞(0）回复(0）举报 2023-01-14