css - 如何将样式应用于 PrimeFaces 数据表？

Question

最初，我有一个 JSF 数据表 2.0，如下所示:

<h:dataTable value="#{bean.items}" var="item" styleClass="table table-hover">

看起来像这样:

我想使用行选择，所以我切换到 PrimeFaces 4.0 数据表:

<p:dataTable value="#{bean.items}" var="item" styleClass="table table-hover"
    rowKey="#{item.id}" selection="#{bean.selectedItem}" selectionMode="single">

看起来像这样:

但是，我的样式类 table 和 table-hover 没有被应用。这是怎么引起的，我该如何解决？

Answer 1

获取您的 Primefaces 版本的 Primefaces 用户指南 here .
在该文档中，您将找到如何在 Skinning 标题下覆盖每个组件的样式。
例如:
以下是 p:outputLabel

的皮肤

如果您想更改颜色，我会使用我的 css，因为它适用于所有 p:outputLabel。

.ui-outputlabel{
color:blue;
}   

如果你只想改变一个特定的p:outputLabel的样式，你可以像这样使用

<div class="myLabel">
   <p:outputLabel value="This is Demo" />
</div>

那么 CSS 会是这样的:

.myLabel .ui-outputlabel{
    color:blue;
}