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

Question

我正在使用以下代码根据 props 中的布尔值在 React 组件中动态设置类名：

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

但是，我也在使用 CSS 模块，所以现在我需要将类名设置为：

import styles from './styles.css';

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

我在这方面遇到了麻烦 - 我尝试使用 classnames 来获得对多个类的更多控制，但是因为我需要最终结果是类名同时设置为 styles.sideMenu AND styles.active（以便 CSS 模块启动）我不确定如何处理这个问题。

非常感谢任何指导。

Answer 1

看来您需要使用 Object.assign

将 active 和 sideMenu 的样式组合在一起

Answer 2

使用 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 3

这是我能找到的最接近可行的解决方案：

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

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

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

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

Answer 4

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

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

Answer 5

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

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

Answer 6

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

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

let cx = classNames.bind(styles);

并像这样使用它：

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

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

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);

Multiple classNames with CSS Modules and React