title: Nesting variables in a React JSX string
body: <p>I am modifying this code stanza</p>
  
  <pre><code>&lt;div className={`${css['red']} ${css['blue']}`}&gt;
      ...
  &lt;/div&gt;
  </code></pre>
  
  <p>to this, changing the <code>blue</code> string to a variable</p>
  
  <pre><code>var colorVariable = 'blue'
  &lt;div className={`${css['red']} ${css[{colorVariable}]}`}&gt;
      ...
  &lt;/div&gt;
  </code></pre>
  
  <p>But this doesn't take any effect whatsoever. Neither does <code>${css['{colorVariable}']}</code>. </p>
  
  <p>Doing <code>${css[${colorVariable}]}</code> results in a error. </p>
  
  <p>What is the right way to next JSX variables in a string?</p>
  
  <p>Edit: 
  The css object is defined as follows</p>
  
  <pre><code>import css from 'assets/style.scss'
  </code></pre>