32

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;
            }
        }
    }

すべての子の属性を変更する「メニュー表示」になることがあるラッピング クラスがありますが、React でこのようにするのは悪い習慣ですか?

メニューが表示されている場合に変更される .header 内に複数のクラスがあるため、ラッピング クラスを変更するだけで便利です。何らかの方法で子を参照できますか? scssに入れ子になったままですか？

編集

私が考えることができる 1 つの解決策は、className="menu" を className={styles.header.menu} に置き換えることですが、それはうまくいかないようです。問題は、親がメニュー表示クラスを持っている場合、.menu の属性を変更したいということです。

4

5 に答える 5

47

私はそれを解決しました。心の中でやり過ぎただけだと思います。ネストされていても、書く代わりに と書くstyles.header.menuことができました。styles.menu

例 (React + JSX):

<div className={styles.header}>
  <div className={styles.menu}>
      Whatever
  </div>
</div>

.header {
   .menu {
      display: block;
   }
 }
于 2016-12-01T08:24:51.457 に答える
-1

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

https://github.com/JedWatson/classnames

それは何かがこのようになります

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

于 2016-12-01T08:12:41.403 に答える