に反応：複数のクラス名と私は動的に小道具からブール値に基づいて反応させ、コンポーネントにクラス名を設定するには、次のコードを使用してい
<div className={this.props.menuOpen ? 'inactive' : 'active'}> ... </div>
をしかし、私はまた、CSSを使用していますモジュール、今私はにクラス名を設定する必要があります。
import styles from './styles.css';
<div className={styles.sideMenu}> ... </div>
私はこの問題を抱えています - 私はclassnamesを使って複数のクラスでより多くの制御を得ようとしましたが、classNameが両方ともstyles.sideMenuとstyles.activeに設定されている必要があります。私はこれをどのように扱うか不明です。
ご迷惑をおかけして申し訳ございません。
を使用してactiveとsideMenuのスタイルを組み合わせる必要があるだろうと思われますそしてES6：
let classNames = classnames(styles.sideMenu, { [styles.active]: this.props.menuOpen });
classnamesとES5の使用：
var classNames = classnames(styles.sideMenu, this.props.menuOpen ? styles.active : '');
ああ..私は構文を理解できませんでした - それは完璧です、ありがとうクリス！ – Toby
私はCSSモジュール上の専門家ではないが、私はこの文書を見つけました：https://github.com/css-modules/css-modules/blob/master/docs/import-multiple-css-modules.md
あなたが一緒にclassnamesを使用しObject.assign
私はこれを手伝った - しかし、私はターゲットがこの場合どのようなものかを確かめていない - 私は小道具のブール値に基づいてクラスを追加し、CSSモジュールのクラスを追加する必要があり、両方に接頭語を付ける必要がある'スタイル.' – Toby
これは、私が働いて解決策を得ることができる最も近い：
const isActive = this.props.menuOpen ? styles.inactive : styles.active;
<div className={isActive + ' ' + styles.sideMenu}>
これは、作業を行う - の両方がインポートされたスタイルシート内のスタイルを使用できるようにする、とありますthis.props.menuOpenがtrueの場合にのみ適用されます。
しかし、それはかなりハッキーです - 私は誰かがアイデアを持っている場合は、より良い解決策を見たいと思います。
3進演算子の代わりに論理ANDを使用すると、classnamesは偽値を省略しているため、冗長性はさらに低くなります。
<div className={ classNames(styles.sideMenu, this.props.menuOpen && styles.active) }></div>
なぜ「classnames」があなたのために機能しないのですか？これはそのために設計されたケースです。 – Chris
私はこれを 'classnames'で遠くに持っています： ' '' let classNames = classnames（styles.sideMenu、{ active：this.props.menuOpen、 }）; '' ' しかし、キー' active'は 'styles.active'でなければなりません（インポートされたスタイルシートにCSSを置くことができるように）、これを設定するとエラーが発生します。おそらく私はドキュメントを誤解していますか？ – Toby