React: The `style` prop expects a mapping from style properties to values, not a string : <p>I have the following HTML to render using React:</p>

<pre><code>      &lt;a
        style='background-color:black;color:white;text-decoration:none;padding:4px 6px;font-family:-apple-system, BlinkMacSystemFont, "San Francisco", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, "Segoe UI", Arial, sans-serif;font-size:8px;font-weight:bold;line-height:1;display:inline-block;border-radius:3px'
        href= //...
        target='_blank'
        rel='noopener noreferrer'
        className='credit-box-abs'
      &gt;
        &lt;span style='display:inline-block;padding:2px 3px;font-size:11px'&gt;
          &lt;i className='fas fa-camera-retro'&gt;&lt;/i&gt;
        &lt;/span&gt;
        &lt;span style='display:inline-block;padding:2px 3px'&gt;Photographer name&lt;/span&gt;
      &lt;/a&gt;
</code></pre>

<p>When I try to compile, I get the following warnings about each <code>style</code>:</p>

<pre><code>Style prop value must be an object
</code></pre>

<p>And the error:</p>

<pre><code>The `style` prop expects a mapping from style properties to values, not a string.
</code></pre>

<p>The suggested solution from the compiler, as well as online, states:</p>

<pre><code>&lt;div style={{ styleAttribute: 'whatever', ... }}&gt;
</code></pre>

<p>So I've tried the following:</p>

<pre><code>      &lt;a
        style={{background-color:'black';color:'white';text-decoration:'none';padding:'4px 6px';font-family:'-apple-system , BlinkMacSystemFont, \"San Francisco\", \"Helvetica Neue\", Helvetica, Ubuntu, Roboto, Noto, \"Segoe UI\", Arial, sans-serif ';font-size:'8px';font-weight:'bold';line-height:'1';display:'inline-block';border-radius:'3px'}}
        href= //...
        target='_blank'
        rel='noopener noreferrer'
        className='credit-box-abs'
      &gt;
        &lt;span style='display:inline-block;padding:2px 3px;font-size:11px'&gt;
          &lt;i className='fas fa-camera-retro'&gt;&lt;/i&gt;
        &lt;/span&gt;
        &lt;span style='display:inline-block;padding:2px 3px'&gt;Photographer name&lt;/span&gt;
      &lt;/a&gt;
</code></pre>

<p>But the syntax is not correct. Am I supposed to wrap all values of each attribute in <code>''</code>? In particular, the syntax for <code>background-color: 'black'</code> is giving redlines under, as well as redline under my closing <code>&lt;/a&gt;</code> tag.</p>
