PrimeNG造型/主题

Question

寻找一些关于如何改变primeNG面板组件背景的造型/主题的建议。

我试图在组件的scss文件中使用下面的名称进行覆盖。但是，这并没有奏效。内嵌我试图

<p-panel header="Test" [style]="{'background': '#20A8D8 '}" [toggleable]="true">

它只是改变了组件的背景，没有标题标题。想知道是否有人坚持/剥皮了任何组件，并可以帮助向我解释如何去做。

这些可用于面板 - 只是不知道如何访问/覆盖它们：

UI面板容器元素。 ui-panel-titlebar标题部分。 ui-panel-title面板的标​​题文本。 ui-panel-titlebar-toggler切换图标。 ui-panel-content面板的内容。

感谢

Answer 1

很简单，在你的CSS文件中使用他们作为类，如下列：

.ui-panel-title { // Your css code for Title text of the panel. }

希望它可以帮助

Answer 2

覆盖PrimeNG组件的使用styleClass属性和你的风格必须将您的样式放入根styles.css或styles.scss（如果您使用的是SCSS）。

我的风格将覆盖PrimeNG面板页脚风格：

.editClientPanel .ui-panel-footer { 
background: linear-gradient(to bottom, #f6f7f9 0%, #ebedf0 100%); 

}

希望它可以帮助或者如果你想办法克服的问题，希望你学到的东西你没有。