如何用自定义样式覆盖默认的PrimeFaces CSS？
我已经创build了自己的主题作为一个单独的Maven项目，并正确加载。
现在我想改变一个组件的大小。 例如，一个<p:orderList> 。 它有一个名为ui-orderlist-list ，它在primefaces.css定义，具有固定的200×200尺寸。 无论我在我的theme.css做什么，它都被这个属性覆盖，而且我无法将内容作为<p:orderList>一部分。
对于其他组件，我可能只想重写组件的一个实例，而不是全部。
任何人都可以告诉我，我怎么能做到这一切？
有几件事情你需要考虑到哪一个或多个可能是相关的你你的具体情况
在 PrimeFaces 之后加载你的CSS
您需要确保您的CSS在PrimeFaces 之后加载。 您可以通过将<h:outputStylesheet>引用CSS文件在<h:body>而不是<h:head> ：
<h:head> ... </h:head> <h:body> <h:outputStylesheet name="style.css" /> ... </h:body>
JSF会自动将样式表重新定位到生成的HTML <head>的末尾 ，这样可以确保样式表在PrimeFaces的默认样式之后加载。 这样，CSS文件中与PrimeFaces CSS文件完全相同的select器将优先于PrimeFaces。
你可能还会看到一些build议，把它放在<f:facet name="last"> <h:head> <f:facet name="last"> ，这是PrimeFaces特定的HeadRenderer理解的，但是当你有自己的HeadRenderer时，这是不必要的笨拙的， 。
了解CSS特异性
您还需要确保您的CSSselect器至less与特定元素上PrimeFaces的默认CSSselect器相同。 您需要了解CSS特定性和级联和inheritance规则 。 例如，如果PrimeFaces默认声明一个样式如下
.ui-foo .ui-bar { color: pink; }
你声明为
.ui-bar { color: purple; }
而class="ui-bar"的特定元素碰巧有一个class="ui-foo"的父元素，那么PrimeFaces的元素仍然会优先，因为这是最具体的匹配！
您可以使用webbrowser开发人员工具来查找确切的CSSselect器。 在网页浏览器（IE9 / Chrome / Firefox + Firebug）中右键单击相关元素，然后select检查元素以查看它。
部分覆盖
如果您只需要覆盖组件的特定实例的样式，而不是相同组件的所有实例，则可以添加一个自定义styleClass和钩子。 另一种情况是使用/应用特异性。 例如：
<p:dataTable styleClass="borderless">
.ui-datatable.borderless tbody, .ui-datatable.borderless th .ui-datatable.borderless td { border-style: none; }
永远不要使用！重要
如果您无法正确加载CSS文件或者find正确的CSSselect器，那么您可能会获得!important解决方法。 这是平原错误。 这是一个丑陋的解决方法，而不是一个真正的解决scheme。 它只会长期混淆你的风格规则和你自己。 !important 只应该用来覆盖HTML元素的style属性中的CSS样式表文件（这反过来也是一个坏习惯，但在一些罕见的情况下不幸的是不可避免的）硬编码的值。
也可以看看：
- 如何在Facelets模板中引用CSS / JS / image资源？
- Mozilla开发者networking> CSS>特异性 （伟大的文章，一定要阅读！）
- 了解CSS中的样式优先：特殊性，inheritance性和级联
你可以创build一个新的css文件，例如cssOverrides.css
并放置所有你想要的内容，这样升级primefaces版本不会影响你，
并在你的头上添加类似的东西
<link href="../../css/cssOverrides.css" rel="stylesheet" type="text/css" />
如果它不会工作尝试将其添加到h：身体
为了检查它的工作是否尝试在CSS文件内的这个简单的例子
.ui-widget { font-size: 90% !important; }
这将减less所有的primefaces组件/文本的大小
我正在使用PrimeFaces 6.0。 这里有一些我喜欢的信息：
如果你使用<h:outputStylesheet/> ，它将起作用，但是即使它在<h:head></h:head>标签中（最后会包含其他的CSS文件），CSS也不会被最后加载。 我从这里学到的一个技巧就是把它放在<f:facet name="last"></f:facet> ， 它必须放在body里面 ，像这样：
<h:body> <f:facet name="last"> <h:outputStylesheet name="css/MyCSS.css" /> </f:facet> ...
那么你的CSS将是最后加载的。 注意：您仍然必须遵守BalusC概述的特殊性规则。
我在WebContent / resources / css /中放置了“MyCSS.css”。
有关资源加载顺序的更多信息： http ： //www.mkyong.com/jsf2/primefaces/resource-ordering-in-primefaces
