时间戳

首页 > 解决方案 > 不能有条件地在反应中设置跨度的样式（css模块）

javascript - 不能有条件地在反应中设置跨度的样式（css模块）

问题描述

我做了什么。

  <span className="status">
    {isOnline}?{styles.online}: {styles.offline}
  </span>

从 JSON 中获取数据。需要根据值设置特定的样式

我在 CSS 模块中有什么：

 .online {
  border: 2px solid green;
}

.offline {
  border: 2px solid red;
}

错误：我没有得到类值，而是得到了类名

标签： javascriptcssreactjscss-modules

解决方案

我建议使用classnames库。它对条件类分配有很大帮助：

<span className={classnames(styles.status, {
  [styles.online]: isOnline,
  [styles.offline]: !isOnline,
})}>
</span>

推荐阅读