如何使用自定义样式覆盖默认的 PrimeFaces CSS? [英] How do I override default PrimeFaces CSS with custom styles?
问题描述
我想更改 PrimeFaces 组件的大小.例如， 并添加一个 pt:class 并将其放在输出中.
永远不要使用 !important
如果您未能按顺序正确加载 CSS 文件或无法找到正确的 CSS 选择器，您可能会采用 !important 解决方法.这是完全错误的.这是一个丑陋的解决方法，而不是一个真正的解决方案.从长远来看，它只会混淆你的风格规则和你自己.!important 应该only 用于从 CSS 样式表文件(位于这也是一种不好的做法，但在某些极少数情况下不幸不可避免).
另见:
I want to change the size of a PrimeFaces component. For example, a <p:orderList>. It has a class called ui-orderlist-list which is defined in primefaces.css with a fixed 200x200 dimension. No matter what I do in my theme.css, it is overwritten by this attribute and there is no way I can make the content part of a <p:orderList> wider.
For other components I might want to override just one instance of a component, not all.
Can anyone please tell me how can I do all this?
There are several things you need to take into account of which one or more might be relevant you your specific case
Load your CSS after PrimeFaces one
You need to ensure that your CSS is loaded after the PrimeFaces one. You can achieve this by placing the <h:outputStylesheet> referencing your CSS file inside <h:body> instead of <h:head>:
<h:head>
...
</h:head>
<h:body>
<h:outputStylesheet name="style.css" />
...
</h:body>
JSF will automatically relocate the stylesheet to the end of the generated HTML <head> and this will thus ensure that the stylesheet is loaded after the PrimeFaces' default styles. This way the selectors in your CSS file which are exactly the same as in PrimeFaces CSS file will get precedence over the PrimeFaces one.
You'll probably also see suggestions to put it in <f:facet name="last"> of <h:head> which is understood by PrimeFaces-specific HeadRenderer, but this is unnecessarily clumsy and would break when you have your own HeadRenderer.
Understand CSS specificity
You also need to ensure that your CSS selector is at least as specific as the PrimeFaces' default CSS selector on the particular element. You need to understand CSS Specificity and Cascading and Inheritance rules. For example, if PrimeFaces declares a style by default as follows
.ui-foo .ui-bar {
color: pink;
}
and you declare it as
.ui-bar {
color: purple;
}
and the particular element with class="ui-bar" happen to have a parent element with class="ui-foo", then the PrimeFaces' one will still get precedence because that's the most specific match!
You can use the webbrowser developer tools to find the exact CSS selector. Rightclick the element in question in the webbrowser (IE9/Chrome/Firefox+Firebug) and choose Inspect Element to see it.
Partial overriding
If you need to override a style for only a specific instance of the component and not all instances of the same component, then add a custom styleClass and hook on that instead. It is another case where specificity is used/applied. For example:
<p:dataTable styleClass="borderless">
.ui-datatable.borderless tbody,
.ui-datatable.borderless th
.ui-datatable.borderless td {
border-style: none;
}
If a component does not support a styleClass and you are on jsf 2.2 or up, you can also use passtrough attributes and add a pt:class and have it end-up on the output.
<p:clock pt:class="borderless" />
Never use !important
In case you fail to properly load the CSS file in order or to figure the right CSS selector, you'll probably grab the !important workaround. This is Plain Wrong. It's an ugly workaround and not a real solution. It only confuses your style rules and yourself more in long term. The !important should only be used in order to override the values hardcoded in HTML element's style attribute from a CSS stylesheet file on (which is in turn also a bad practice, but in some rare cases unfortunately unavoidable).
See also:
- How to reference CSS / JS / image resource in Facelets template?
- Mozilla Developer Network > CSS > Specificity (great article, a must read!)
- Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade
这篇关于如何使用自定义样式覆盖默认的 PrimeFaces CSS?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
