反应类名 - element.module.css + state.conditional答案

【问题标题】：React className - element.module.css + state.conditional反应类名 - element.module.css + state.conditional
【发布时间】：2020-07-11 03:04:11
【问题描述】：

我正在尝试为 React Web 应用程序制作移动下拉菜单。

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

这是我的代码。

<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 样式模块使用的类名与我设置的不同这一事实有关。例如，我在前端使用类名<div className={css.mainNavigation}>，它看起来像这样：

<div class="_1jGJsP2ItGoSSFd9cLCFqV ">

点击后，像这样

<div class="_1jGJsP2ItGoSSFd9cLCFqV active">

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

【问题讨论】：

标签： css reactjs class next.js classname

【解决方案1】：

我想通了。

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

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

【讨论】：

【解决方案2】：

虽然您可以手动执行此操作，但我建议您尝试 clsx https://github.com/lukeed/clsx 它是一个非常小的实用程序，旨在完全满足您的需求，而且非常易于使用。

你也可以选择类名，比较流行的https://github.com/JedWatson/classnames

【讨论】：

手动操作是否如此复杂以至于需要一个小工具？我目前正在学习 React，所以在学习阶段更喜欢手动操作。我上面的代码为元素提供了正确的类，但是样式不适用。
您的代码看起来不错，但可能您没有正确导入样式。你是怎么导入css的？不，当然你不是绝对需要它，但它很容易使用/学习并且对你有很大帮助
嘿，谢谢。样式都是从同一个 module.css 表加载的，所以它应该可以工作。在我的 CSS 样式表的底部，我有这个：@media (max-width: 650px) { .mainNavigation { display: none; } .active { 显示：弹性；该类正在打开和关闭元素，但菜单没有改变显示，也没有注册 .active 样式。我猜这与它看起来好像 className 在导入时被转换的事实有关，所以它可能没有变得 .active。
嘿，我已经添加到原始问题中，因为在 cmets 中很难正确格式化