reactjs - Multiple classNames with CSS Modules and React

Question

I'm using the following code to dynamically set a className in a React component based upon a boolean from props:

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

However, I'm also using CSS Modules, so now I need to set the className to:

import styles from './styles.css';

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

I'm having trouble with this - I tried using classnames to gain more control with multiple classes, but because I need the end result to be that the className is set to both styles.sideMenu AND styles.active (in order for CSS Modules to kick in) I'm unsure how to handle this.

Any guidance greatly appreciated.

Answer 1

使用类名和 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

在这里聚会有点晚了，但使用字符串模板对我有用 - 如果你也愿意，你可以将三元运算符移出 const ：

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

Answer 3

我想添加一个更好的方式来使用npm的bindapi 。classnames您可以将类名绑定到从 css 导入的样式对象，如下所示：

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

let cx = classNames.bind(styles);

并像这样使用它：

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

其中 sideMenu 和 active 在样式对象中。

Answer 4

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

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

Answer 5

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

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

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

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

但是，这很 hacky - 如果有人有任何想法，我很乐意看到更好的解决方案。

Answer 6

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

看来您需要将样式组合active在一起sideMenu使用Object.assign

Answer 7

使用Array.join

<div className={[styles.sideMenu, this.props.menuOpen ? styles.show : styles.hide].join(' ')}></div>

Answer 8

import classNames from 'classnames/bind'.

那么你可以像这样使用：
let cx = classNames.bind(styles);