Primeng

Question

我想使用 Togglebutton 组件的 styleClass 属性。如中所述，我认为使用以下方法很简单：

styleClass="test"

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

.test { background: red; }

但这不起作用。使用 style 使用 [style]="{'background':'red'}" 非常清楚没问题。但是 styleClass 不起作用。 Here is the component。知道如何使用 styleClass 吗？

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 不是原始选择器的替代品，而是一个补充。

Answer 2

您可以尝试覆盖 o PrimeNg 组件来执行此操作，例如。我正在使用 tabMenu 并工作：

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

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

在 root style.css 文件中，您只需使用正文，然后使用样式类名称。

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

我没有测试其他属性，可能如果你需要改变一些更深的东西，你需要像

一样级联

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

Answer 3

p-dropdown

的示例

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

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

Primeng - 如何使用 styleClass？