css - 多个类属性（来自变量）未在反应中显示

Question

我正在尝试设计我的反应组件。但我理解奇怪的行为。

<div className={classNames(scss[isOdd ? 'timeline-item-icon-odd' 
: 'timeline-item-icon-even'], [inProgress])}>

我在dom中得到的是：

timeline-item-icon-odd___3K5am progress

其中进度来自变量 inProgress。

• 在我看来，我认为这是这样做的方法，但显然它只呈现第一类而完全忽略了第二类。

• 我已经设置了一个 html 和 css 文件，我在应用之前检查了我的样式，它们都可以正常工作。

CSS：

.timeline-item-icon-odd {
      background-color: gray;
      border-color: gray;
}

.progress {
      background-color: green !important;
      border-color: green !important;
}

所以我想要实现的是根据inProgress中的变量来获得背景。

我希望有人有任何想法。
先感谢您！
问候

标签： cssreactjsvariablesdom

Answer 1

如果您想将 inProgress 与其他条件 css 类一起添加，您需要inProgress像这样添加：

<div className={classNames(scss[isOdd ? 'timeline-item-icon-odd' 
          : 'timeline-item-icon-even',inProgress])}>

我希望这能解决问题。我已经尝试过了，它奏效了。