Primeng - 如何使用 styleClass？

Question

我想使用Togglebutton组件的styleClass属性。如在另一篇帖子中所述，我认为只需使用以下代码即可：

<p:selectOneButton styleClass="my-button-class" />

styleClass="test"

然后我在我的CSS文件中设置了一些属性，例如

.test { background: red; }

但是这样不起作用。使用[style]="{'background':'red'}"非常清晰，没有问题。但是styleClass不起作用。 这是组件的链接。有什么想法如何使用styleClass吗？

- Sheldon

---

对于大多数PrimeNG组件，您需要使用根styles.css文件中的styleClass来覆盖原始样式。例如：styleClass="test"，然后在styles.css中，您可以使用test类添加您喜欢的样式。现在，PrimeNG组件的样式也有不同的部分。例如：ui-datatable-header等。如果您想更改datatable标题的样式，则需要使用以下CSS代码：.test .ui-datatable-header {} 您可能需要利用Chrome Dev Tools找到要设置样式的确切元素。（我正在使用手机，所以很难制作plunker） - Chau Tran

谢谢您的回复 @ChauTran。我发现使用此属性的唯一方法是将“Viewencapsulation”设置为“none”。此外，我不得不使用组件的原始类，看起来像这样：.test.ui-state-highlight, .test.ui-togglebutton.ui-button.ui-state-active {}。我找不到其他可以使用“styleClass”的方法。 - Sheldon

我很高兴你找到了解决方案。是的，那几乎是使用styleClass的唯一方式。而styleClass的作用就是区分不同的类似组件（比如两个数据表）。 - Chau Tran

@Chau Tran "styleClass只是用来区分不同的相似组件。"这就是我之前没有意识到的点。感谢您的澄清！ - Sheldon

不要忘记在angular.js文件中导入样式。 - Germán Sánchez Pastor

Answer 1

为了明确事情： styleClass 属性仅是组件原始类的补充。这意味着您必须始终使用原始类来为组件设置样式。使用 styleClass，您可以定位同一类型多个组件中的一个或多个组件。所以，如果有五个 Togglebutton 组件，您通常可以为这些组件设置样式：

.ui-togglebutton.ui-button.ui-state-active{}

如果您希望以不同的样式呈现其中的某个组件，则可以添加styleClass属性：

<p-toggleButton styleClass="different"></p-toggleButton>

现在你可以通过以下方式在你的CSS中使用这个：

.different.ui-togglebutton.ui-button.ui-state-active{}

因此，styleClass不是原始选择器的替代品，而是一种补充。

- Sheldon

---

我们必须将封装设置为无，才能使用这些CSS吗？ 因为直接使用它不起作用。 - Ishan

Answer 2

您可以尝试通过以下方式覆盖 PrimeNg 组件，例如我使用了 tabMenu 并成功实现了覆盖：

<p-tabMenu styleClass="override-this"></p-tabMenu>

我认为它可以与任何接受styleClass的PrimeNg组件一起使用。

在根样式表文件中，您只需使用body，然后是styleClass名称。

body .override-this{
  font-size: 10px;
}

我没有测试其他属性，如果您需要更深层次的更改，则可能需要级联使用

body .override-this .ui-tabmenu .ui-tabmenu-nav等等。

- Cassius Horvath

Answer 3

如果您想保留视图封装，另一个选项是将 :host 与 ::ng-deep一起使用。

:host ::ng-deep .test {
    background: red;
}

请注意，::ng-deep可能会在未来被移除。请参见这个SO问题。

- PeterS

Answer 4

p-dropdown的示例

.p-dropdown {
  &.add-attr-dropdown {
    border: 0px;
  }
}

这里 add-attr-dropdown 是您自定义的类名

- Gowtham Gowda