how to pass style using dangerouslySetInnerHTML in React

Question

I'm injecting html in my react component using dangerouslySetInnerHTML in a format like this :

<div 
    className="mt-2 col variant-attr-cell p-0" 
    dangerouslySetInnerHTML = { { 
        __html: JSON.parse(attrs[i].snippet).snippet.replace("{text}", 
        attrs[i].choices[j].visualization_data) 
    } } 
>
</div>

and it works fine but I'm trying to pass style to the injected html at the same time but don't know how! I'm trying to add different styles to the injected html based on the api I get, something like this:

height: 12px;
width: 12px;
border-radius: 50%;
display: inline-block;
margin: 0 4px;

FYI the injected html is something like this mostly:

<span></span>

and the styles must be added to this and not the container div! Any solution is appreciated, thanks.

Answer 1

You can still add the desired style. Just add another props style:

const styleObj = {
  color: 'white',
  backgroundColor: 'red'
};


<div 
  className="mt-2 col variant-attr-cell p-0" 
  dangerouslySetInnerHTML = {
    { __html: JSON.parse(attrs[i].snippet).snippet
        .replace("{text}", attrs[i].choices[j].visualization_data)
     } 
   }
   style={styleObj}
>
</div>

If you're trying to add style inside the element that resides in the html, then you should have their styles there in the html itself.