CSSモジュールでクラスをネストして反応する方法は？

Question

ReactプロジェクトでCSSモジュールを使用しようとしています。問題の最初の部分は、（sassを使って）ネストされたcssクラスを書くと、内側のものにアクセスできるかどうかわからない、というのはそれらも一意のクラス名にコンパイルされているようだからです。いくつかのコード：

<div className={this.state.visible ? styles.header+" menu-visible" : styles.header}> 
    <div className="menu"> 
     <a className="link">title</a> 
    </div> 
</div> 

    .header { 
     &.menu-visible { 
      .menu { 
       display:block; 
      } 
     } 
    } 

私は時々、反応して、このようにそれを行うには悪い習慣「メニューから見える」すべての子どもに属性を変更されているラッピングクラスを持っていますか？

メニューが表示されている場合に変更される.header内に複数のクラスがあるため、ラッピングクラスを変更するだけで大​​丈夫でしょう。何らかの方法で子を参照できますか？だから、scssにネストされた残りの部分は？私は考えることができる

EDIT

一つの解決策は、クラス名= {} styles.header.menuとクラス名=「メニュー」を交換することですが、それは動作しないようでした。問題は、その親がクラスメニューが見える場合、.menuがその属性を変更したいということです。

Answer 1

オクラホマのように見えますが、私はそれを解決しました。私はそれを私の頭の中でちょうど過ぎたと思う。 styles.header.menuを書くのではなく、たとえそれがネストされていても、styles.menuを書くことができます。

Answer 2

もう1つの方法があります。私はこれを行うにはclassnamesパッケージを使用します。

https://github.com/JedWatson/classnames

それは何かがこの

<div className={classnames('styles.header',{ 'menu-visible': this.state.visible})}>