Multiple classNames with CSS Modules and React
<p>I'm using the following code to dynamically set a className in a React component based upon a boolean from props:</p>

<p><code>&lt;div className={this.props.menuOpen ? 'inactive' : 'active'}&gt;
...
&lt;/div&gt;</code></p>

<p>However, I'm also using CSS Modules, so now I need to set the className to:</p>

<p><code>import styles from './styles.css';</code></p>

<p><code>&lt;div className={styles.sideMenu}&gt;
...
&lt;/div&gt;</code></p>

<p>I'm having trouble with this - I tried using <a href="https://github.com/JedWatson/classnames" rel="noreferrer">classnames</a> to gain more control with multiple classes, but because I need the end result to be that the className is set to both <code>styles.sideMenu</code> <strong>AND</strong> <code>styles.active</code> (in order for CSS Modules to kick in) I'm unsure how to handle this.</p>

<p>Any guidance greatly appreciated.</p>