PrimeNG按钮未定型

Question

所以我试图将我的PrimeNG按钮设置为橙色背景，如下所示：

<button pButton class="orange-button" label="Click Me".....>

然后在我的样式表中做

.ui-button.orange-button {
background-color: orange;
}

但是，该按钮的颜色与正在使用的omega主题保持相同。我如何才能覆盖此项？我使用angular 2和angular CLI，所以我将它链接到.ts文件中的样式表。

Answer 1

PrimeNg的造型需要记住两个主题。

组件DOM

PrimeNG组件通常包含HTML标记

您可能正在设置PrimeNG组件的样式，而不是它所包含的HTML。例如，p-button组件包装button，因此要使按钮的宽度为100%，需要将p-button和button(或按钮类(设置为100%的样式。

像您在示例中所做的那样，使用pButton指令而不是p-button组件有助于简化更改组件所需的样式。

CSS特定性

PrimeNG是相当具体的，所以自定义CSS需要更加具体。

W3Schools在https://www.w3schools.com/css/css_specificity.asp.

基本上样式button不够具体。您可能需要将some-component button设置为更具体的样式。

SCSS可能看起来像：

my-component {
.ui-button {
.orange-button {
background-color: orange;
}
}
} 

Answer 2

在priming元素上使用：：ng deep-pesudo类选择器：如果你使用LESS或sass风格：

::ng-deep pButton 
{
.ui-button.orange-button
{
background-color: orange
}
}

Answer 3

使用important覆盖样式。

.ui-button.orange-button {
background-color: orange !important;
}