Angular-ui-grid - text-decoration doesn't apply to row template children

Question

I am able to set the row background colour by applying the following CSS to row template in AngularJS UI grid:

    .deleted {
        background-color: #e3e3e3 !important;
    }

It works well. However, when I add

text-decoration: line-through !important;

It doesn't apply to text within the row. What am I doing wrong?

Answer 1

Looks like I have unnecessarily added this style:

.ui-grid-row .ui-grid-cell {
               background-color: inherit !important;
}

And to get the desired effect I simply had to change the row template in the following way:

$scope.gridOptions= {
        rowTemplate: '<div>'+
        '<div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" ' +
        'class="ui-grid-cell" ' +
        ' ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader, deleted: row.entity.deleted}" ui-grid-cell></div></div>'}

Where deleted: row.entity.deleted is the condition setting my class.