I'm trying to create a text component where first word of the sentence to be bold. Right now with my solution, when a user enter "Tips: favourite vacation", I get " Tips: favouritevacation", where rest of sentence becomes mess and no space is created after Tips:. This isn't elegant solution. I thought about creating another component like TextBold and use it like this < Text >< TextBold >Tips:< /TextBold > Your Vacation< /Text >, but this seems unnecessary. Is there a way to get this working within Text component alone?

CodePudding user response：

Try

<span style={{ fontWeight: "bold" }}>{children?.shift()}</span>
<span>{children?.split("").slice(1)}</span>