2016-07-14 37 views
10

ich den folgenden Code bin mit auf dynamisch einen Klassennamen in einer Komponente Reagieren auf ein boolean von Requisiten basiert:Mehrere Klassennamen mit CSS-Module und Reagieren

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

Aber ich bin auch mit CSS Module, so jetzt muss ich den Klassenname festlegen zu:

import styles from './styles.css';

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

Ich habe Probleme mit - Ich habe versucht mit classnames, um mehr Kontrolle mit mehreren Klassen zu bekommen, aber weil ich das Endergebnis zu sein, dass der Klassenname auf styles.sideMenuUNDstyles.active (um für CSS-Module zu kick Ich bin unsicher, wie ich damit umgehen soll.

Jede Anleitung sehr geschätzt.

+0

Warum würden 'classnames' nicht für Sie arbeiten? Dies ist der Fall, für den es bestimmt ist. – Chris

+0

Ich habe so weit mit 'classnames': ' '' classNames = Klassennamen (styles.sideMenu, { active: this.props.menuOpen, }); '' ' Die Taste' active' muss jedoch 'styles.active' sein (damit ich meine CSS im importierten Stylesheet platzieren kann), und das Setzen dieser Option erzeugt einen Fehler. Vielleicht verstehe ich die Dokumentation nicht? – Toby

Antwort

12

Mit classnames kombinieren müssen und es6:

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

Mit classnames und ES5:

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

Ah .. Ich konnte die Syntax nicht herausfinden - das ist perfekt, danke Chris! – Toby

0

Während ich kein Experte für CSS Module bin, habe ich diese Dokumentation: https://github.com/css-modules/css-modules/blob/master/docs/import-multiple-css-modules.md

Es scheint, dass Sie die Stile für active und sideMenu zusammen mit Object.assign

+0

Ich habe damit herumgespielt - aber ich bin mir nicht sicher, ich sehe, was das Ziel in diesem Fall wäre - ich brauche eine Klasse basierend auf einem boolean in Requisiten und eine Klasse aus dem CSS-Modul, und beide sollten vorangestellt werden 'Stile.' – Toby

0

Dies ist die nächste, die ich an eine funktionierende Lösung bekommen:

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

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

Dies funktioniert - sowohl die Stile in der importierten Sheet erlauben verwendet werden soll, und ist wird nur angewendet, wenn this.props.menuOpentrue ist.

Aber es ist ziemlich hacky - ich würde gerne eine bessere Lösung sehen, wenn jemand irgendwelche Ideen hat.

0

Die Verwendung des logischen AND anstelle des ternären Operators macht es noch weniger ausführlich, da classnames einen falschen Wert auslässt.

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