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

Question

我使用下面的代码在React组件中基于来自props的布尔值动态设置一个class Name：

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

从./styles.css导入样式；

我在这方面遇到了麻烦-我尝试使用类名来获得对多个类的更多控制，但因为我需要最终结果是将类名同时设置为样式。侧菜单和样式。活动（为了让CSS模块生效），我不确定如何处理这个问题。

非常感谢任何指导。




Answer 1

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

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

let cx = classNames.bind(styles);

并像这样使用它：

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

“侧菜单”和“活动”在“样式”对象中的位置。

Answer 2

有点晚了，但是使用字符串模板对我有用——如果你愿意，你可以把三元运算符移出到常量：

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

Answer 3

使用类名和es6：

let classNames = classnames(styles.sideMenu, { [styles.active]: this.props.menuOpen });

使用类名和es5：

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