反应className-element.module.css + state.conditional

Question

我正在尝试使React Web应用程序的移动设备下拉。

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

这是我的代码。

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

代码将.active添加到我的元素中，但是.active的样式没有通过。

在我的navbar.module.scss中，以下代码是相关的行。

@media (max-width: 650px) {
      .mainNavigation {
        display: none;
      }
      .active {
        display: flex;
      }
    }

我猜想这与以下事实有关：在前端，一旦渲染了所有代码，导入的scss样式模块将使用与我设置不同的className。例如，在前端使用类名<div className={css.mainNavigation}>的地方，它看起来像这样：

<div class="_1jGJsP2ItGoSSFd9cLCFqV ">

点击后，像这样

<div class="_1jGJsP2ItGoSSFd9cLCFqV active">

但是我的.active文件中的modular.scss css没有通过。

Answer 1

虽然您可以手动执行此操作，但我建议您尝试使用clsx https://github.com/lukeed/clsx 这是一个很小的实用工具，旨在完全满足您的需求，并且使用起来也很容易。

您还可以使用类名，https://github.com/JedWatson/classnames

更受欢迎

Answer 2

我知道了。

我需要将className添加为css.active而不是active。

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