Несколько имен классов с модулями CSS и реакцией

Я использую следующий код для динамического определения имени класса в компоненте React на основе логического из реквизита:

<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). Я не уверен, как с этим справиться.

Любое руководство было очень оценено.

Ответ 1

Используя classnames и es6:

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

Использование classnames и es5:

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

Ответ 2

Использование логического AND вместо тернарного оператора делает его еще менее подробным, так как classnames опускает значение фальшивости.

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

Ответ 3

Я немного опоздал на вечеринку, но использование шаблонов строк работает для меня - вы можете переместить троичный оператор в const, если хотите, также:

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

Ответ 4

Пока я не эксперт по модулям CSS, я нашел эту документацию: https://github.com/css-modules/css-modules/blob/master/docs/import-multiple-css-modules.md

Кажется, вам нужно объединить стили для active и sideMenu вместе с помощью Object.assign

Ответ 5

Это ближайший я могу найти в рабочем решении:

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

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

Это работает - и позволяет стилям в импортированной таблице стилей использоваться и применяется только тогда, когда this.props.menuOpen есть true.

Однако, это довольно хаки - я бы хотел увидеть лучшее решение, если у кого-нибудь есть идеи.

Ответ 6

Я хотел просто добавить лучший способ использования API bind classnames npm. Вы можете привязать имена классов к объекту стилей, импортированному из css, как показано ниже:

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

let cx = classNames.bind(styles);

и используйте его так:

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

где sideMenu и active находятся в объекте styles.