primeng : trying to override p-tag styleclass, :host ::ng-deep doesn't work

Question

Code is as below

abc-component.html

<td>
<p-tag styleClass = "p-mr-2" severity = "{{getSeverity(status)}}"
*ngIf = "status" [ngClass] = "status"></p-tag></td>

abc-component.ts

public getSeverity(status) {
  switch(status){
  'status1' : return "warning";
  'status2' : return "danger";
  'status3' : return "info";
  'status4' : return "primary";
  'status5' : return "success";
 }
}

styles.scss

:host ::ng-deep{
  .status6{
    color : blue;
    background : green; 
  }
}

I want status6 to have a custom color/background. But when I try to inspect my css in the browser, I notice that it takes color and background from p-tag class. ( I have verified that it's taking the status6 class, but it gets overridden by p-tag.) How do I override the p-tag class?

Edit : After various failed attempts, I ended up using :not() with the other p-tag classes. :not() has higher specificity and was therefore applied successfully.

.p-tag:not(.p-tag-warning):not(.p-tag-success):not(...

Answer 1

You must set styles with :host and ::ng-deep in something like "abc-component.scss" , not in global CSS file.

Your's Example