title: How to use props variable for css-modules className?
body: <p>Is it possible to use a props variable for a css-modules className?</p>
  <pre><code>// Component.js
  import styles from &quot;./Component.module.scss&quot;
  
  const Component = ({ color }) =&gt; 
      &lt;div className={`${styles.component}` `${styles.color}`&gt;
          Component
      &lt;/div&gt;
  
  // Component.module.scss
  .component { border: 1px black solid; }
  .red { color: red; }
  .green { color: green; }
  </code></pre>
  <p>Then I could use the <code>Component</code> like so:</p>
  <pre><code>// App.js
  &lt;Component color=&quot;red&quot; /&gt;
  &lt;Component color=&quot;green&quot; /&gt;
  </code></pre>
  <p>And have the two <code>Components</code> be red and green respectively.</p>