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

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

...

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

从“/styles.css”导入样式


...

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

非常感谢您的指导。
虽然我不是CSS模块方面的专家，但我确实发现了以下文档：

似乎需要使用
对象将
活动
和
侧菜单
的样式组合在一起。使用和es6分配
：

使用
类名
和es5：

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

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

const isActive=this.props.menuOpen？styles.inactive：styles.active


这是可行的-两者都允许使用导入样式表中的样式，并且仅当
This.props.menuOpen
为
true
时才应用

然而，它非常粗糙-如果有人有任何想法，我希望看到一个更好的解决方案。
使用逻辑
和
而不是三元运算符，这使得它更不冗长，因为
类名
忽略了一个错误的值

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

这里的聚会有点晚了，但是使用字符串模板对我来说很有用-如果您愿意，您可以将三元运算符移出常量：

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


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

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

let cx = classNames.bind(styles);

然后像这样使用它：

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

侧菜单和活动菜单在styles对象中的位置。
为什么
classnames
不适合您？这就是它的设计目的。我用
类名
：让classnames=classnames（styles.sideMenu，{active:This.props.menuOpen，}）
但是，键
active
必须是
styles.active
（这样我就可以将css放在导入的样式表中），设置为该键会产生错误。也许我误解了文档？我在这方面做了些手脚，但我不确定在这种情况下目标是什么-我需要一个基于props中的布尔值添加的类，以及一个来自css模块的类，并且两者都应该以
样式作为前缀。
.Ah。。我搞不懂语法-太好了，谢谢克里斯！对我来说很好。仅供参考：最后你错过了一个}。
cx("sideMenu", "active": isOpen)