Question

我的应用运行PrimeNG 1.1.2和Angular 2.4.1。在我的模板中，我使用PrimeNG选项卡视图以及相应的选项卡面板和相应的标题。出于某种原因，我想设置选项卡面板标题的外观。例如，假设我想将其字体颜色设置为绿色：

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

但是，此样式不适用且字体颜色不会更改

我错过了哪些指针？

修改： font-color替换为color

Answer 1

尝试覆盖ui-tabview-title类并在style.css

中设置必需的css

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

Answer 2

没有名称为infile '/data/csv/test3.txt' "str x'0D'"的CSS属性，您正在寻找font-color：

color

W3Schools明确指出：

属性<p-tabPanel header="Bezier Curve" [selected]="true" [headerStyle]="{'color': 'green'}"> - 设置文本的颜色

编辑：

问题如下 - 在模板渲染之后，标题文本位于color标记之间，这意味着您必须创建CSS类，它将更改标题内a标记所包围的文本颜色：

然后使用.greenText a { color: green; }属性而不是headerStyleClass来应用CSS类：

headerStyle

Answer 3

我遇到了同样的问题，[headerStyle]和[headerStyleClass]都不适合我。我切换了背景色，无论出于什么原因，都可以使用。

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

也许对其他人也有帮助。 ps：我使用的是PrimeNG 9.1.4和Angular：9.1.3

PrimeNG选项卡视图中的标签面板标题的内联样式

3 个答案: