1

ReactJS と CSS モジュールを使用するプロジェクトに取り組んでおり、各反応コンポーネントには対応する SASS ファイルがあります。

CSS を記述すると、各クラスに「トリプル アンダースコア ランダム文字列」が追加されます。.myClass__e7G3A

私のアプリは、スクロール位置に応じて body タグにクラス (top' または 'down') を追加し、コンポーネントがこれに応答するようにします。

私が抱えている問題は、.topまたは.downCSSモジュール内に追加すると、そのクラスの最後にも一意の識別子が追加されることです。

例えば

JSX:

<div className={styles.main}>
  Main content goes here.
</div>

レンダリングされた HTML:

<body class="top">
  <div class="main___iZy2A">
    Main content goes here.
  </div>
</body>

SASS ファイル:

.top .main {
  margin-top: 0;
}
.down .main {
  margin-top: 100px;
}

コンパイル済み CSS:

.top___Gvf3S .main___iZy2A {
  margin-top: 0;
}
.down___kpd3S .main___iZy2A {
  margin-top: 100px;
}

望ましい CSS 結果: (一意.topの.down識別子なし)

.top .main___iZy2A {
  margin-top: 0;
}
.down .main___iZy2A {
  margin-top: 100px;
}

単純な識別子またはこれを達成できる何かが欠けていると確信しています。

お役に立てれば幸いです。ありがとう。

4

1 に答える 1

6

セレクターで:globalを使用します。

:global(.top) .main___iZy2A {
  margin-top: 0;
}
:global(.down) .main___iZy2A {
  margin-top: 100px;
}

または、複数のグローバル セレクターがある場合は、:globalとの組み合わせ::local

:global .top .top--left :local .main___iZy2A {
  margin-top: 0;
}
:global .down .down--right :local .main___iZy2A {
  margin-top: 100px;
}
于 2016-11-16T10:54:01.477 に答える