Primeng - 如何使用styleClass?

问题描述

我想使用 Togglebutton 组件的 styleClass 属性.如另一篇文章所述，我认为使用以下方法很简单:

I want to use the styleClass property of the Togglebutton component. As described in another post, I thought it is straight forward by using:

styleClass="test"

在我的 css 文件中，我设置了一些属性，比如

In my css-file I then set some attributes, like

.test { background: red; }

但这行不通.使用 [style]="{'background':'red'}" 可以非常清楚地使用 style 没问题.但是 styleClass 不起作用.这是组件.知道如何使用 styleClass 吗?

But this does not work. Working with style is perfectly clear by using [style]="{'background':'red'}" No problem with that. But styleClass does not work. Here is the component. Any idea how to use styleClass?

推荐答案

澄清一下:styleClass 属性只是对组件原始类的补充.这意味着，您始终必须使用原始类来设置组件的样式.使用 styleClass，您就可以对一组相同类型的组件中的一个或多个组件进行寻址.因此，有五个 Togglebutton 组件，您通常可以使用

To make things clear: the styleClass property is only an addition to the original classes of the component. That means, you always have to use the original classes in order to style the component. With styleClass you then have the possibility to address one or more components of a set of components of the same type. So, having five Togglebutton components, you can generally style those components with

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

如果您想以不同的方式设置其中一个组件的样式，您可以添加 styleClass 属性:

If you then want to style one of those components differently, you can add the styleClass property:

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

在您的 css 中，您现在可以通过以下方式解决这个问题:

And in your css you can now address this one by:

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

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

Thus styleClass is not a replacement for the original selectors, it is an addition.

这篇关于Primeng - 如何使用styleClass?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！