React中如何为字符串前7个字符添加样式类或颜色？

场景回顾 #

你已经通过Object.values()提取了目标文本片段，现在需要为每个文本的前7个字符（比如Step 1:）单独设置样式，当前的字符拆分代码如下：

<p className='w-50 con fs-5'>
  {
    // 希望为前7个字符添加类/颜色
    content[value][1].substring(0,7).toUpperCase() + 
    content[value][1].slice(7)
  }
</p>

具体实现 #

核心思路是用<span>标签包裹需要单独设置样式的前7个字符，再为这个span添加样式类或内联样式：

方式1：使用自定义样式类

先在CSS文件中定义样式类：

.step-label {
  color: #e63946; /* 自定义颜色 */
  font-weight: 700; /* 可选：加粗增强视觉效果 */
}

然后修改JSX代码：

<p className='w-50 con fs-5'>
  <span className="step-label">
    {content[value][1].substring(0,7).toUpperCase()}
  </span>
  {content[value][1].slice(7)}
</p>

方式2：使用内联样式

如果不想单独写CSS类，直接用内联样式更快捷：

<p className='w-50 con fs-5'>
  <span style={{ color: '#e63946', fontWeight: '700' }}>
    {content[value][1].substring(0,7).toUpperCase()}
  </span>
  {content[value][1].slice(7)}
</p>

边界处理（可选） #

为了避免文本长度不足7时出现异常，可以加个简单的判断：

const currentText = content[value][1] || '';
const styledPart = currentText.length >= 7 
  ? currentText.substring(0,7).toUpperCase() 
  : currentText.toUpperCase();
const normalPart = currentText.length >=7 
  ? currentText.slice(7) 
  : '';

// 渲染部分
<p className='w-50 con fs-5'>
  <span className="step-label">{styledPart}</span>
  {normalPart}
</p>

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