Override primeng css classes in Angular

Question

The thing is that I want to override the CSS classes of primeng and change some colors. No matter how I do it it doesn't change. If change the ViewEncapsulation to none the component doesn't even appear. I've tried something like this:

.ui-chkbox-box.ui-state-active, .ui-radiobutton-box.ui-state-active {
 border: 1px solid red !important;
  background: red !important;
  color: #FFFFFF;
}

Trying to override the properties in the component css but it still doesn't work.

I know other people have asked the same question but none of the answers has helped me so I'm a little bit desperate.

Answer 1

Add ::ng-deep

::ng-deep .ui-chkbox-box.ui-state-active{...}

Answer 2

I added the classes to the app.less file and it worked like a charm. The component .css was not working.