Add styleName property on React component when using react-css-modules
<p>When using <a href="https://github.com/gajus/react-css-modules" rel="nofollow">react-css-modules</a> in a project, I found myself trying to do something that can be simplified to this:</p>

<pre class="lang-js prettyprint-override"><code>import React from 'react'
import CSSModules from 'react-css-modules'
import ChildComponent from './ChildComponent.jsx'
import styles from './ParentComponent.css'

class ParentComponent extends React.Component {

  render() {
    return (
      &lt;div&gt;
        &lt;p styleName='parentComponent'&gt;This is rendered in ParentComponent&lt;/p&gt;
        &lt;ChildComponent styleName='some-name' /&gt; // this style is not applied
      &lt;/div&gt;
    )
  }

}

export default CSSModules(ParentComponent, styles)
</code></pre>

<p>The CSS class <code>some-name</code> is defined in <code>ParentComponent.css</code> and contains rules that will position <code>ChildComponent</code>within <code>ParentComponent</code>.</p>

<p><code>ChildComponent</code> implementation looks like this:</p>

<pre class="lang-js prettyprint-override"><code>import React from 'react'
import CSSModules from 'react-css-modules'
import styles from './ChildComponent.css'

class ChildComponent extends React.Component {

  render() {
    return (
      &lt;div&gt; // expected to have this div decorated with 'some-name' class
        &lt;p styleName='childComponent'&gt;This is rendered in ChildComponent&lt;/p&gt;
        &lt;button styleName='childComponent'&gt;This is rendered in ChildComponent&lt;/button&gt;
      &lt;/div&gt;
    )
  }

}

export default CSSModules(ChildComponent, styles)
</code></pre>

<p>I was expecting to receive the CSS defined in the <code>some-name</code> class in the first element of what's rendered on <code>ChildComponent</code> (the wrapping ), but this is not happening and 'some-class' is just ignored.</p>

<p>I could workaround this issue by adding an extra wrapping  and applying styles to it, but I would like to avoid this if possible:</p>

<pre class="lang-js prettyprint-override"><code>// in ParentComponent do this instead

render() {
    return (
      &lt;div&gt;
        &lt;p styleName='parentComponent'&gt;This is rendered in ParentComponent&lt;/p&gt;
        &lt;div styleName='some-name'&gt;
          &lt;ChildComponent /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    )
  }
</code></pre>

<p>Hopefully I have explained the use case and the issue well enough, so any recommendation on how to do this will be much appreciated.</p>