React className-element.module.css+；有条件的

我正在尝试为React web应用程序制作移动下拉列表

我对向react元素添加多个类时使用的正确语法感兴趣。我想通过导入的模块添加样式，以及基于状态添加样式

这是我的密码

<div className={[css.mainNavigation, `${this.state.isActive === true ? 'active' : ''}`].join(' ')}>
 </div>

我猜这与以下事实有关：在前端，一旦呈现了所有代码，导入的scss样式模块使用的类名与我设置的不同。例如，我在前端使用类名

，它如下所示：

<div class="_1jGJsP2ItGoSSFd9cLCFqV ">

点击之后，像这样

<div class="_1jGJsP2ItGoSSFd9cLCFqV active">

---

但是，我的

modular.scss

文件中的

.active

css无法通过。

虽然您可以手动执行此操作，但我建议您尝试clsx 它是一个非常小的实用程序，设计的目的是完全满足您的需要，而且使用起来也非常简单

你也可以选择类名，我发现它更流行

我需要将类名添加为

css.active

而不是

active

${this.state.isActive === true ? css.active : ''}

---

手动操作是否如此复杂，以至于需要一个小型实用程序？我现在正在学习如何反应，所以我更喜欢在学习阶段手动操作。我上面的代码为元素提供了正确的类，但是样式不适用。您的代码看起来不错，但可能没有正确导入样式。你是如何导入css的？不，当然你并不绝对需要它，但它很容易使用/学习，并帮助你很多。谢谢。这两种样式都是从同一个module.css表加载的，因此应该可以正常工作。在css样式表的底部，我有以下内容：@media（最大宽度：650px）{.mainNavigation{display:none；}.active{display:flex；}}}类正在打开和关闭元素，但菜单既没有更改显示也没有注册.active样式。我猜这与这样一个事实有关：导入时，类名看起来好像被转换了，所以它可能没有被激活。嘿，我已经添加到了原始问题中，因为很难在注释中正确设置格式

${this.state.isActive === true ? css.active : ''}