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

Question

我正在使用以下代码根据 props 中的布尔值在 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 模块生效）我不确定如何处理。

非常感谢任何指导。

Answer 1

import classNames from 'classnames/bind'.

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

Answer 2

使用Array.join

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

Answer 3

我想添加一个更好的方式来使用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 4

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

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

Answer 5

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

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

Answer 6

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

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

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

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

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

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

Answer 8

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

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