我已经创建了自己的主题作为单独的Maven项目，并且已正确加载了该主题。
现在，我想更改组件的大小。例如，<p:orderList>。它有一个名为ui-orderlist-list的类，该类在primefaces.css中定义，且尺寸固定为200x200。无论我在theme.css中做什么，它都将被此属性覆盖，并且无法将<p:orderList>的内容范围扩大。
对于其他组件，我可能只想覆盖一个组件实例，而不是全部。
谁能告诉我该怎么做？
最佳答案
您需要考虑几件事，其中一项或多项可能与您的具体情况有关
PrimeFaces 1之后加载CSS
您需要确保在PrimeFaces之后加载CSS。您可以通过将引用CSS文件的<h:outputStylesheet>放在<h:body>而不是<h:head>内来实现此目的：
<h:head>
...
</h:head>
<h:body>
<h:outputStylesheet name="style.css" />
...
</h:body>
JSF将自动将样式表重新定位到生成的HTML
<head>的末尾，从而确保在PrimeFaces的默认样式之后加载样式表。这样，CSS文件中与PrimeFaces CSS文件中的选择器完全相同的选择器将优先于PrimeFaces一个。您可能还会看到建议将其放在
<f:facet name="last">的<h:head>中，这是PrimeFaces特定的HeadRenderer可以理解的，但是这太笨拙了，当您拥有自己的HeadRenderer时，它可能会损坏。了解CSS的特异性
您还需要确保CSS选择器至少与特定元素上的PrimeFaces默认CSS选择器一样具体。您需要了解CSS Specificity和Cascading and Inheritance rules。例如，如果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;
}
如果某个组件不支持
styleClass并且您使用的是jsf 2.2或更高版本，则还可以使用passtrough attributes并添加pt:class并将其最终输出。<p:clock pt:class="borderless" />
切勿使用！重要
万一您无法正确地加载CSS文件，或者无法找到正确的CSS选择器，则可以使用
!important解决方法。这是错误的。这是一个丑陋的解决方法，而不是真正的解决方案。从长远来看，它只会使您的样式规则和您自己更加困惑。 !important仅应用于覆盖CSS样式表文件中HTML元素的style属性中硬编码的值（这反过来也是一种不好的做法，但在极少数情况下是不可避免的）。也可以看看：
How to reference CSS / JS / image resource in Facelets template?
Mozilla Developer Network > CSS > Specificity（精彩文章，必读！）
Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade
关于css - 如何使用自定义样式覆盖默认的PrimeFaces CSS？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47309217/