React＋CSS Modules＋Scssの書き方が分からない記法があります

Question

前提・実現したいこと

以下の構成で、ボタンを押したらモーダルを開く機能を作成しています。

• React.js
• CSS Modules
• Scss

下記はデモです。
CodeSandBox

モーダルをwrapするdivに「modal（booean）がtrueだったらactiveクラスを追加」という処理によって、モーダルの表示非表示を切り替えようと試みています。

「openModal」ボタンを押したら、モーダルの背景がフェードインしつつ、画面外下から上に向かって動きながらモーダル本体を表示したいです。

発生している問題・エラーメッセージ

「openModal」ボタンを押してもモーダルが表示されません。
具体的には下記の点が機能していません。

• modalにactiveクラスが付いても、.modalに付けた&.activeのCSSが効いていない
• modalにactiveクラスが付いても、子要素のdivにそれぞれ付けた.modal.active &のCSSが効いていない

---

あと一応機能しているので問題って程でも無いのですが、activeクラスの追加が下記のように三項演算子を使わないと「modalがtrueの時に"active"が付く、falseのときは何も付かない」という挙動にならないです。

className={`${styles.modal} ${modal ? "active" : ""}`}

理論的に言えば三項演算子である必要は無く、下記のように書けばよいと思います。

className={`${styles.modal} ${modal && "active"}`}

しかし、上記のコードでデベロッパツールでこのElementを確認したところ、「modalがfalseのときは"false"、trueのときは"active"が付く」という挙動になりました。
この現象も意味が分からなくて気持ち悪いので、できれば解決したいです。

該当のソースコード

const [modal, setModal] = useState(false);
console.log(modal);

return (
  <>
    <button onClick={() => setModal(true)}>openModal</button>
    <hr />
    <div className={`${styles.modal} ${modal ? "active" : ""}`}>
      <div className={styles.bg}></div>
      <div className={styles.contents}>
        <h2>This is Modal</h2>
        <p>This is modal contents.</p>
      </div>
    </div>
  </>
);

.modal {
  display: none;
  position: fixed;
  inset:0;
  width: 100vw;
  height: 100vh;

  &.active {
    display: block;
  }
}

.bg {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.2s;

  .modal.active & {
    opacity: 1;
  }
}

.contents {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 100vh);
  background: white;
  padding: 1rem;
  transition: transform 0.2s;

  .modal.active & {
    transform: translate(-50%, -50%);
  }
}

試したこと

activeクラスの付与やSCSSの書き方に問題があるのではなく、そもそもCSSに不備があるのかと考え、activeクラスが付与された状態に変更される各CSSをデベロッパーツールで設定してみました。

.modal {
  - display: none;
  + display: block
}

.bg {
  - opacity: 0;
  + opacity: 1;
}

.contents {
  - transform: translate(-50%, 100vh);
  + transform: translate(-50%, -50%);
}

上記の変更により、モーダルが表示できました。

このことから、設定したCSSに問題はなく、activeクラスの付与の仕方やSCSSの書き方に問題があると確認できました。

SCSSの書き方は下記のページを参考にしました。

• 連結したクラス（.modal {&.active}の部分）

セレクタの前に記述する

• 親クラスの状態を参照する書き方（.bg {.modal.active & {}}の部分）

セレクタの後に記述する

Answer 1

1. モーダルが表示されない問題

こないに修正するとええと思うで。

-  <div className={`${styles.modal} ${modal ? "active" : ""}`}>
+  <div className={`${styles.modal} ${modal ? styles.active : ""}`}>

2. ${modal && "active"} について

論理積 (&&)

構文
expr1 && expr2
解説
expr1 が true に変換できる場合は expr2 を返し、それ以外の場合は expr1 を返します。

上記に従えば、modal && "active" の評価結果は、

• modal が truthy のとき "active"
• modal が falsy のとき modalの値

になるねん。なので、modalがfalseのときのmodal && "active" の評価結果は false となる。そやから

className={`${styles.modal} ${modal && "active"}`}

によって、className には "_src_App_module__modal false"という文字列が設定されることになるねんな。

ひとつお節介やけど

こういうときには、classnames ゆうのん使うとええでー。これ使うと、こない

className={classNames(styles.modal, { [styles.active]: modal })}

に書けるよってな。ほんで、active がtrueんときはclassNameは、

• "_src_App_module__modal _src_App_module__modal"

になり、falseんときは、

• "_src_App_module__modal"

になりよる。

---

追記：

あ、間違うてしもた。{ styles.active: active } やなくて、{ [styles.active]: modal } やった。（※修正済み）

---

追記2：

forkしてclassNames使ったやつ ➡ サンプル