Question

我正在尝试设置我的react组件的样式。但我了解我的怪异行为。

<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中的变量设置背景。

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

Answer 1

如果要与其他条件CSS类一起添加inProgress，则需要添加inProgress，如下所示：

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

我希望这可以解决问题。我已经尝试过了，并且奏效了。

Answer 2

解决方案：

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

解决方案是前面的scss。因此出现语法错误。

多个类属性（来自变量）未显示在react中

2 个答案: