PrimeNG 按钮没有样式化

Question

所以我正在尝试将我的 PrimeNG 按钮风格化为这样的橙色背景：

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

然后按照我的风格sheet做

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

但是按钮的颜色与正在使用的 omega 主题保持相同。我怎样才能覆盖这个？我正在使用 angular 2 并使用 Angular CLI，所以我将它链接到 .ts 文件中的样式 sheet。

Answer 1

使用 important 覆盖样式。

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

Answer 2

在 primeng 元素上使用 ::ng-deep 伪 class 选择器： 如果您使用 LESS 或 sass 样式：

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

Answer 3

为 PrimeNg 设计样式需要记住两个主题。

组件DOM

PrimeNG 组件通常包含 HTML 个标签。

您可能正在设计 PrimeNG 组件的样式，而不是它包含的 HTML。例如，p-button 组件包装了一个 button，因此要使按钮的宽度为 100%，需要将 p-button 和 button（或按钮 class）设置为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;
         }
    }
}