PrimeNG 按钮没有样式化答案

【问题标题】：PrimeNG Button not StylizingPrimeNG 按钮没有样式化
【发布时间】：2019-01-13 17:36:08
【问题描述】：

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

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

然后在我的样式表中做

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

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

【问题讨论】：

【解决方案1】：

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

组件 DOM

PrimeNG 组件内部通常包含 HTML 标记。

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

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

CSS 特异性

PrimeNG 相当具体，因此自定义 CSS 需要更具体。

基本上造型button 不够具体。您可能需要设置some-component button 的样式以使其更具体。

使用 SCSS 可能看起来像：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

使用important 覆盖样式。

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

【讨论】：