css - 具有 CSS 模块和 React 的多个类名

Question

我使用以下代码根据 props 中的 bool 值在 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 });

使用类名和es5:

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