web-dev-qa-db-ja.com

CSSモジュールとReactを持つ複数のclassNames

次のコードを使用して、propsのブール値に基づいてReactコンポーネントでclassNameを動的に設定します。

<div className={this.props.menuOpen ? 'inactive' : 'active'}> ... </div>

ただし、CSSモジュールも使用しているため、classNameを次のように設定する必要があります。

import styles from './styles.css';

<div className={styles.sideMenu}> ... </div>

私はこれに問題があります-複数のクラスでより多くの制御を得るために classnames を使用しようとしましたが、最終結果はclassNameがstyles.sideMenu[〜＃〜] and [〜＃〜]styles.active（CSSモジュールが機能するため）これを処理する方法がわかりません。

ガイダンスは大歓迎です。

reactjscss-modules
21
Toby

classnames およびes6を使用：

let classNames = classnames(styles.sideMenu, { [styles.active]: this.props.menuOpen });

classnamesとes5を使用：

var classNames = classnames(styles.sideMenu, this.props.menuOpen ? styles.active : '');
23
Chris

三項演算子の代わりに論理ANDを使用すると、classnamesが偽の値を省略するため、さらに冗長になります。

<div className={ classNames(styles.sideMenu, this.props.menuOpen && styles.active) }></div>
2
rexblack

ここでパーティーに少し遅れましたが、文字列テンプレートを使用するとうまくいきます-必要に応じて、三項演算子をconstに移動することもできます：

<div className={`${styles.sideMenu} ${this.props.menuOpen ? styles.inactive : styles.active}`>
...
</div>
0
bertybro

私はCSSモジュールの専門家ではありませんが、次のドキュメントを見つけました： https://github.com/css-modules/css-modules/blob/master/docs/import-multiple-css-modules .md

Object.assignを使用して、activeとsideMenuのスタイルを結合する必要があるようです。

0
Michael Camden

bind npmのclassnames apiを使用するより良い方法を追加したかっただけです。以下のように、CSSからインポートされたスタイルオブジェクトにクラス名をバインドできます。

import classNames from 'classnames/bind';
import styles from './index.css';

let cx = classNames.bind(styles);

次のように使用します：

cx("sideMenu", "active": isOpen)

sideMenuとactiveはスタイルオブジェクトにあります。

0
orangespark

これは私が実用的な解決策に最も近いものです：

const isActive = this.props.menuOpen ? styles.inactive : styles.active;

<div className={isActive + ' ' + styles.sideMenu}>

これは機能します-どちらもインポートされたスタイルシートのスタイルを使用できるようにし、this.props.menuOpenはtrueです。

しかし、それはかなりハッキーです-誰かが何かアイデアを持っているなら、私はより良い解決策を見たいです。

0
Toby