Как заменить строку другой и другим цветом в ReactJS?

Question

У меня есть строка, сопоставленная с массивом, и я использовал регулярное выражение для возврата определенного текста. Я хочу, чтобы этот конкретный текст был другого цвета, когда он отображается. Однако текущий подход не работает, так как он не позволяет мне просто установить стиль строки в чистом javascript. Есть ли способ исправить это, чтобы замена могла работать с новым текстом другого цвета.

В идеале конечный результат должен выглядеть следующим образом:

@user This is text

При этом @user синий, а остальное черное

{this.state.dataReplies.map((n, i) => {
            var re = /@(\S+)\b/g;
            let oldstr = n.description.match(re);
            console.log(oldstr);
            let newstr = oldstr.style.colour = "#0066ff";
            let str = n.description.replace(oldstr, newstr);
    return (
      <p>{str}</p>
    );
})}

Answer 1

Спасибо @ Jayce444 за решение:

{this.state.dataReplies.map((n, i) => {
            var re = /@(\S+)\b/g;
            let oldstr = n.description.match(re);
            let str = n.description.replace(oldstr, "");
    return (
      <p> <span style={{color: "#0066ff"}}>{oldstr}</span> {str}</p>
    );
})}