title: using css modules in react how can I pass a className as a prop to a component
body: <p>If I have a react component and I want to pass in a className, how do I do this with CSS Modules. It currently just gives the className but not the hash generated css module name which I would get for 
  <code>&lt;div className={styles.tile + ' ' + styles.blue}&gt;</code></p>
  
  <p>Here is my <strong>Tile.js</strong> component</p>
  
  <pre><code>import React, { Component } from 'react';
  
  import styles from './Tile.css';
  
  class Tile extends Component {
  
    render() {
  
      return (
        &lt;div className={styles.tile + ' ' + this.props.color}&gt;
          {this.props.children}
        &lt;/div&gt;
      );
    }
  };
  
  export default Tile;
  </code></pre>
  
  <p><strong>Tile.css</strong> </p>
  
  <pre><code>@value colors: "../../styles/colors.css";
  @value blue, black, red from colors;
  
  .tile {
      position: relative;
      width: 100%;
      padding-bottom: 100%;
  }
  
  .black {
    background-color: black;
  }
  
  .blue {
    background-color: blue;
  }
  
  .red {
    background-color: red;
  }
  </code></pre>
  
  <p>So as you can see I initialize this Tile wrapper component as follows in my Author Tile, but I want to pass a color prop into the component:</p>
  
  <p><strong>AuthorTile.js</strong></p>
  
  <pre><code>return (
    &lt;Tile orientation='blue'&gt;
     &lt;p&gt;{this.props.title}&lt;/p&gt;
     &lt;img src={this.props.image} /&gt;
    &lt;/Tile&gt;
  );
  </code></pre>