如何使用自定义样式覆盖默认的PrimeFaces CSS？

Question

我已经创建了自己的主题作为单独的Maven项目，并且已正确加载了该主题。

现在，我想更改组件的大小。例如，一个<p:orderList>。它有一个名为的类ui-orderlist-list，它primefaces.css使用200x200的固定尺寸定义。无论我在我的工作中做什么theme.css，它都会被此属性覆盖，并且我无法将内容 扩大。

对于其他组件，我可能只想覆盖一个组件实例，而不是全部。

谁能告诉我该怎么做？

Answer 1

您需要考虑几件事，其中一项或多项可能与您的具体情况有关

PrimeFaces 之后加载CSS

您需要确保在PrimeFaces之后加载CSS 。您可以通过将<h:outputStylesheet>引用CSS文件<h:body>而不是放在其中来实现此目的<h:head>：

<h:head>
    ...
</h:head>
<h:body>
    <h:outputStylesheet name="style.css" />
    ...
</h:body>

JSF将自动将样式表重新定位到生成的HTML 的末尾，从而确保在PrimeFaces的默认样式之后加载样式表。这样，CSS文件中与PrimeFaces CSS文件完全相同的选择器将优先于PrimeFaces一个。

你可能也看到建议把它<f:facet name="last">的<h:head>这是由PrimeFaces特定的理解HeadRenderer，但这是不必要的笨拙，当你有你自己会打破HeadRenderer。

了解CSS的特异性
您还需要确保CSS选择器至少与特定元素上的PrimeFaces默认CSS选择器一样具体。您需要了解CSS特殊性以及级联和继承规则。例如，如果PrimeFaces默认声明一个样式，如下所示

.ui-foo .ui-bar {
    color: pink;
}

然后您将其声明为

.ui-bar {
    color: purple;
}

并且特定的元素class=”ui-bar”恰好具有的父元素class=”ui-foo”，那么PrimeFaces的元素仍将优先，因为这是最具体的匹配！

您可以使用webbrowser开发人员工具查找确切的CSS选择器。在网络浏览器（IE9 / Chrome / Firefox + Firebug）中右键单击有问题的元素，然后选择“ 检查元素”以查看它。

部分覆盖

如果您只需要为组件的特定实例而不是同一组件的所有实例覆盖样式，则添加一个自定义styleClass并在该钩子上进行钩挂。这是使用/应用特异性的另一种情况。例如：

<p:dataTable styleClass="borderless">
.ui-datatable.borderless tbody,
.ui-datatable.borderless th
.ui-datatable.borderless td {
    border-style: none;
}

如果某个组件不支持a styleClass并且您使用的是jsf 2.2或更高版本，则还可以使用passtrough属性并添加a pt:class并将其最终输出。

<p:clock pt:class="borderless" />

切勿使用！重要
万一您无法正确地加载CSS文件，或者找不到正确的CSS选择器，您可能会抓住!important解决方法。这是错误的。这是一个丑陋的解决方法，而不是真正的解决方案。从长远来看，它只会使您的样式规则和您自己更加困惑。本!important应只以覆盖HTML元素的硬编码值被用来style从一个CSS样式表文件属性（这反过来也是一个不好的做法，但在某些罕见的情况下不幸的是不可避免的）。