p-tabPanel headerStyleClass

[HorseBadorties]

Setting the headerStyleClass property of a p-tabPanel has no effect - what am I missing?

Here's the Stackblitz showing the problem.

Code: Select all

<p-tabView>
	<p-tabPanel header="First" headerStyleClass="redText">
		<span class="redText">tab text should have been red, too...</span>   
	</p-tabPanel>
	<p-tabPanel header="Second">
		Second
	</p-tabPanel>
	<p-tabPanel header="Third">
		Third
	</p-tabPanel>
</p-tabView>

Code: Select all

.redText {
  color: red;
}

[suhail1k4]

i think there is an encapsulation problem here . They have already defined styling for p-tabPanel header and you can't override that with important because of shadowDom concept. There is a fix with that in component add encapsulation like this @Component({
.... ,

encapsulation: ViewEncapsulation.None
})
add add headerStyle or headerStyleClass like you are doing .

.redText a {
property: value
} as you need to add style to content of <a> </a>

However i think there should be a better way of fixing this as it can impact other components if same class if used there . See more on shadowConcept
Thanks