web-dev-qa-db-fra.com

Nom de classe multiple avec les modules CSS et React

J'utilise le code suivant pour définir de manière dynamique un className dans un composant React basé sur un booléen de props:

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

Cependant, j'utilise aussi des modules CSS, je dois donc maintenant définir le nom de la classe sur:

import styles from './styles.css';

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

J'ai des problèmes avec ceci - j'ai essayé d'utiliser classnames pour gagner plus de contrôle avec plusieurs classes, mais parce que j'ai besoin que le résultat final soit que le className est défini sur styles.sideMenuETstyles.active ( afin que les modules CSS entrent en jeu), je ne sais pas comment gérer cela.

Toute orientation grandement appréciée.

reactjscss-modules
15
Toby

Utilisation de classnames et es6:

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

En utilisant classnames et es5:

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

L'utilisation de AND logique au lieu de l'opérateur ternaire le rend encore moins détaillé puisque classnames omet une valeur falsy. 

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

Bien que je ne sois pas un expert des modules CSS, j’ai trouvé cette documentation: https://github.com/css-modules/css-modules/blob/master/docs/import-multiple-css-modules.md

Il semble que vous deviez combiner les styles pour active et sideMenu ensemble à l'aide de Object.assign

0
Michael Camden

C’est ce qui se rapproche le plus d’une solution qui fonctionne:

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

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

Cela fonctionne. Les deux autorisent l'utilisation des styles de la feuille de style importée et ne s'appliquent que lorsque this.props.menuOpen est true.

Cependant, c'est assez compliqué - j'aimerais voir une meilleure solution si quelqu'un a des idées.

0
Toby