如何将跨度元素插入 object（字符串）？

Question

I am working with styled components. I accept an h1 element as a prop from an object which contains a string called title . How can I insert a span element into the string of the object so I could style only this part separately as you would normally do if the text was hardcoded?

export const heroData = {
  title: `Finance Data`,

Answer 1

You can use dangerouslySetInnerHTML attribute for adding raw HTML string to HTML.

export const heroData = {
  title: "Finance <span style="color: red;">Data</span>"
... ...

<div dangerouslySetInnerHTML={{_html: heroData.title}} />