如何在单个Chakra UI Heading元素中设置不同文本颜色？

直接在单个Heading组件内嵌套内联元素（比如Text或原生span）就能解决，既保留标题的语义完整性，又不会出现响应式布局问题，具体有两种常用方式：

方法1：使用Chakra UI的Text组件嵌套 #

利用Text组件的样式属性自定义颜色，它会自动继承Heading的字体、大小等样式，同时保持文本流的正常换行：

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

// TypeScript 实现
const MainHeading = () => (
  <Heading as='h1' color='white'>
    A B <Text color='blue.400'>C</Text>
  </Heading>
);

方法2：使用原生span元素 + Chakra样式props #

Chakra UI支持给原生HTML元素直接传递样式props，这种方式更轻量化：

import { Heading } from '@chakra-ui/react';

const MainHeading = () => (
  <Heading as='h1' color='white'>
    A B <span color='blue.400'>C</span>
  </Heading>
);

为什么之前的flex方法会出问题？ #

你之前用两个Heading加flex的方式，本质是把两个块级标题强行横向排列，在响应式场景下，文本无法像普通段落那样自然换行，小屏幕上可能出现标题被截断、换行位置不符合预期的情况。而内联嵌套的方式完全遵循正常的文本流，换行、对齐等响应式行为和普通标题一致。

如果需要给目标单词添加更多样式（比如字体粗细、间距），直接给Text或span追加对应的Chakra props即可，比如fontWeight='bold'、ml='1'等。

内容的提问来源于stack exchange，提问作者T3chstop