Изменить цвет определенного ряда с помощью модуля выбора

Когда свойство имеет определенное значение, я хотел бы покрасить эту строку. Этот вопрос был задан раньше, и здесь есть рабочее решение: как окрасить строку по определенному значению в угловую-ui-сетку?

Я устанавливаю передний цвет (с цветом: # FF0000), а не цвет фона.

Это отлично работает, пока вы не добавите модуль выбора. С этим модулем у вас есть дополнительный флажок в начале этой строки. Когда вы это проверите, цвет фона строки изменится (а не передний цвет!). Все это добавляет дополнительный класс, объявленный в grid css:

.ui-grid-row.ui-grid-row-selected > [ui-grid-row] > .ui-grid-cell {
  background-color: #c9dde1;
}

Когда флажок установлен, этот класс добавляется к элементу.

Код, который у меня есть, похож на код в связанном ответе:

rowTemplate: '<div ng-class="{\'targetRow\': row.entity.target }"><div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" ui-grid-cell></div></div>',

.targetRow {
    color: #FF0000;
}

После добавления этого цвета цвет фона больше не изменяется при выборе строки. В инструментах отладки в Chrome я вижу, что класс по-прежнему правильно добавлен, и нет никаких других различий, все еще color как-то переопределяет background-color

Почему это происходит и как я могу это исправить?

Здесь Plunker: http://plnkr.co/edit/U1rmT48kSjK5gVH0Fv43?p=preview

Удалите rowTemplate, чтобы увидеть разницу.