Primeng - 如何使用styleClass？

Question

我想使用styleClass组件的Togglebutton属性。如another post中所述，我认为使用以下内容是直截了当的：

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组件一起使用。

在 根style.css 文件中，您只需使用body，然后使用styleClass名称。

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

我没有测试其他属性，可能如果您需要更深一些的修改，您将需要像

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