Inline style of tab panel header in PrimeNG tab view

Question

My app runs PrimeNG 1.1.2 and Angular 2.4.1. In my template I use a PrimeNG tab view with corresponding tab panels and respective headers. For a certain reason I want to style the appearance of the tab panel header. For instance, say I want to set its font color to green:

<p-tabPanel header="Bezier Curve" [selected]="true" 
[headerStyle]="{'color': 'green'}">

However, this style does not apply and the font color doesn't change

Any pointers what I am missing?

Edit: font-color replaced by color

Answer 1

There's no CSS property with name font-color, you are looking for color:

<p-tabPanel header="Bezier Curve" [selected]="true" [headerStyle]="{'color': 'green'}">

W3Schools clearly states:

Property color - Sets the color of text

Edit:

Problem is the following - after template rendering, header text is located between a tags which means you have to create CSS class that will change text color surrounded by a tags inside your header:

.greenText a {
    color: green;
}

And then use headerStyleClass attribute instead of headerStyle to apply CSS class:

<p-tabPanel header="Bezier Curve" [selected]="true" headerStyleClass="greenText">    

Answer 2

Try to override ui-tabview-title class and set required css in style.css

.ui-tabview-title{       
      color:green !important; 
}

Answer 3

We can use the custom header as well.

    <p-tabPanel [selected]="true">
  <ng-template pTemplate="header">
        <span style="color:green">Bezier Curve</span>
</ng-template>
</p-tabPanel>

Answer 4

I had the same problem, neither [headerStyle] nor [headerStyleClass] worked for me. I switched to change the background-color, what -- for whatever reasons -- works.

<p-tabView>
<p-tabPanel [headerStyle]="db.isValid? { 'background-color':'#f58985' }: {}"
            [header]="db.name!"
            leftIcon="fa fa-tasks" *ngFor="let db of datasheets">...

Maybe that helps others too. ps: i used PrimeNG 9.1.4 and Angular: 9.1.3