Несколько атрибутов класса (из переменных) не отображаются в реакции

Question

Я пытаюсь стилизовать свой реактивный компонент. Но я понимаю, странное поведение.

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

Что я получаю в дом:

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

Решение:

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

Решением был scss впереди. Так что синтаксическая ошибка.

Answer 2

Если вы хотите добавить inProgress вместе с другими вашими условными классами CSS, вам нужно добавить inProgress следующим образом:

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

Я надеюсь, что это решит проблему. Я попробовал это, и это сработало.