how to access primefaces datatable row css?

Question

How can acces row css for multiple colored rows?

I try use :

.redRow .ui-datatable-even, ui-datatable-odd {
   background-color: red;
}

.blueRow .ui-datable-even, ui-datatable-odd{
   background-color: blue;
}

but it doesnt work, because primefaces theme override this. How to do something like this?

Answer 1

Make sure your css is loaded after the primefaces css, as demonstrated in this answer.

Answer 2

In your component include the encapsulation: ViewEncapsulation.None to access the elements inside the datatable using css selectors.

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'my-component',
    templateUrl: './my-component.component.html',
    styleUrls: ['./my-component.component.css'],
    encapsulation: ViewEncapsulation.None
})