title: ClassName styles not working in react
body: <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>