0

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?

user2016315
  • 5
  • 5

2 Answers2

0

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

Community
  • 1
  • 1
mrjink
  • 1,131
  • 1
  • 17
  • 28
-1

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
})
Jerome Alburo Mengullo
  • 44
  • 7
  • The Q is about PrimeFaces, your answer is about angular? No relation to the Q – Kukeltje Aug 26 '17 at 17:33
  • Right! My bad. Not deleting my answer for those using Angular and PrimeFaces at the same time :) – Jerome Alburo Mengullo Aug 29 '17 at 06:57
  • Still then, I fail to see how, in a very unlikely combination, this a solution to the PrimeFaces components css. – Kukeltje Aug 30 '17 at 06:40
  • I encountered this kind of problem while using Angular 2. And like OP said that primefaces theme overrides the styles on his css. This solved my problem. If this is unlikely to be considered a solution for this question, just tell me and I will delete my answer. Thanks cheers! – Jerome Alburo Mengullo Aug 30 '17 at 09:52