CODEWITHSUNDEEP
cssangulartypescriptoverridingprimeng
Hely Saul Oberto
Hely Saul Oberto

Reputation: 597

Override primeng css classes in Angular

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.

Upvotes: 4

Views: 5937

Answers (3)

Shrip
Shrip

Reputation: 181

Use below code to override the PrimeNG CSS.

:host ::ng-deep .ui-chkbox-box.ui-state-active {
   // your css code
}

Its is working in version 16.x.x

Upvotes: 0

Kentonbmax
Kentonbmax

Reputation: 958

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

Upvotes: 0

Vega
Vega

Reputation: 28708

Add ::ng-deep

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

Upvotes: 11

Related Questions