title: Node + React - Hyphenated CSS Class Names
body: <p>I'm currently using <code>react-starter-kit</code> and have a few react components each with their own styling file (scss). Basically, every component imports styling file on top like:</p>
  
  <pre><code>import s from './Header.scss';
  </code></pre>
  
  <p>Now, for css classes that do not have hyphens (e.g: 'notification'), I can use it without any problem, but I can't figure out how to use hyphenated css classes:</p>
  
  <pre><code>render() {
   return (
    &lt;div className={s.header-inner}&gt; &lt;/div&gt;
   );
  }
  </code></pre>
  
  <p>This obviously throws an error: 'inner is undefined'.</p>
  
  <p>I changed <code>header-inner</code> to <code>header_inner</code> and the same in my component and it works fine but I can't do it as my css file is pretty huge with hundreds of classes.</p>
  
  <p>Any help would be really appreciated.</p>
  
  <p>Thanks</p>