Применение css стиля в зависимости от переданного пропса

Всем привет. У меня есть метод highLightText и в зависимости от значения передаваемого параметра readonly false или true используется тот или иной стиль. Если readonly true то применяется два стиля. У меня метод написан с ошибкой но идея ясна. Помогите в реализации с применением двух стилей и передачей их в div

highLightText = (value, showTime, readonly) => {
        const className = readonly ? 'text-control text-control--readonly--highlight' : 'text-control text-control--readonly';
        return (
            <div className={className}>
                {convertDate(value, showTime)}
            </div>
        );
    };

Стили из класса scss

div.text-control {
  line-height: ($inputHeight - 2px);
  &--readonly {
    background: $disabled_background;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: not-allowed;
    a {
      cursor: pointer;
    }
  }
  &--textarea {
    margin-bottom: 0;
    line-height: 0.5*$inputHeight;
    white-space: normal;
    overflow-y: auto;
    text-overflow: clip;
  }
  &--highlight {
    color: #009c0e;
  }
}