ClassName styles not working in react : <p>I'm having a little issue with styling react components. I have my scss stylesheets in a separate file and importing them into my react file. My scss stylsheet looks like this:</p>

<pre><code>.testStyle {
  font-family: avenir;
  color: blue;
}
</code></pre>

<p>My react file, looks like this:</p>

<pre><code>import React from 'react'

import styles from '../styles/main.scss'

class Temp extends React.Component {
  render() {
    return (
      **&lt;div className={styles.testStyle}&gt;**
        &lt;h1&gt;Hello&lt;/h1&gt;
      &lt;/div&gt;
    )
  }
}

export default Temp
</code></pre>

<p>With this setup, my styles are not passed through, however, if it works if I replace the starred line with <code>&lt;div className='testStyle'&gt;</code>, so it seems like the styles are being imported correctly. Can anyone help with this? Thanks.</p>
