具有CSS模块和React的多个classNames

Question

我使用以下代码根据来自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模块启动）我不确定如何处理这个问题。

非常感谢任何指导。

Answer 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 : '');

Answer 2

使用逻辑AND而不是三元运算符使得它更加冗长，因为classnames省略了一个假值。

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

Answer 3

虽然我不是CSS模块的专家，但我确实找到了这个文档：https://github.com/css-modules/css-modules/blob/master/docs/import-multiple-css-modules.md

您似乎需要使用active

将sideMenu和Object.assign的样式组合在一起

Answer 4

这是我能找到最接近工作解决方案的地方：

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

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

这确实有效 - 两者都允许使用导入的样式表中的样式，并且仅在this.props.menuOpen为true时才会应用。

然而，它非常hacky - 如果有人有任何想法，我很乐意看到更好的解决方案。

Answer 5

在这里晚一点参加聚会，但是使用字符串模板对我有用-您也可以将三元运算符移到const上：

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

Answer 6

我想补充一种使用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在样式对象中。