css modules でif分岐をさせる方法

こんにちは。
今回は、css modules を使っていた時、
if分岐、
つまり条件を満たしていれば、このクラスを適応させたい！
を実現する方法を紹介します。

書き方

書き方は以下の画像を
参考に説明していきます。

まず、
isActiveで条件を指定し、bool値を変数に格納します。

そして、
css modulesは、1つのdevタグに２つクラスを設定することも出来るので、
ここでは、
無条件で作用するクラス：styles.title
と、
isActiveの値によって適応の有無が変わるクラス：styles.active
を設定しています。

styles.active付近を見てわかる通り、
三項演算子を使って表記していますね。

このように設定すると、
isActiveがtrueの時はクラスが適応され、
falseの時はなにも適応されない状態が出来上がります。