PrimeFaces 覆盖了我的自定义 CSS 样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9892654/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
PrimeFaces overrides my custom CSS style
提问by AlanObject
I am trying to create PrimeFaces commandButtonsof different colors. In my stylesheet I have something like this:
我想创建PrimeFaces CommandButton控件不同的颜色。在我的样式表中，我有这样的东西：
.styleGreen {
background-color: #009900;
font-family: Arial,Helvetica,sans-serif;
}
And the component like this:
和这样的组件：
<p:commandButton value="Green Button" styleClass="styleGreen" ...
This works when the commandButtonis notinside a PrimeFaces panelor some other container. But when I move it into the body of my page, all the custom CSS rules are overridden.
这工作时的commandButton是不是一个PrimeFaces内部面板或其他一些容器。但是当我将它移动到我的页面正文中时，所有自定义 CSS 规则都被覆盖了。
What is the right way of fixing this?
解决这个问题的正确方法是什么？
回答by Ken
Simple solution for you guys:
为你们提供简单的解决方案：
If you have a CommandButton in a Panel (or a Form) like that:
如果您在面板（或表单）中有这样的命令按钮：
<h:form .... >
<p:commandButton value="Green Button" styleClass="styleGreen" ... />
</h:form>
You just define your css like this:
你只需像这样定义你的css：
form .styleGreen {
background-color: #009900;
font-family: Arial,Helvetica,sans-serif;
}
It will work very well (I've just tried it)
效果会很好（我刚试过）
回答by Daniel B. Chapman
While the !important might do it you should probably override the themebuilder css files. View the Primefaces guide on how to use a custom style sheet. Primefaces is basically built on jQueryUI http://jqueryui.com/so override it. (Also, you can just roll a custom theme which is often the better choice).
虽然 !important 可能会这样做，但您可能应该覆盖 themebuilder css 文件。查看有关如何使用自定义样式表的 Primefaces 指南。Primefaces 基本上建立在 jQueryUI http://jqueryui.com/ 上，所以覆盖它。（此外，您可以滚动自定义主题，这通常是更好的选择）。
Just take some time to look at it and if you really need a custom component feel free to build off the standard library and customize it. Since you're dealing with jQuery to begin with it is an easy update.
只需花一些时间查看它，如果您真的需要自定义组件，请随意构建标准库并对其进行自定义。由于您一开始就使用 jQuery，因此更新很容易。
In response
作为回应
I think the best route might be to simply use a standard button and make a composite component. It totally depends on how often you're using it, how important it is to the site and what you need to do. Basically jQueryUI will render a button and a span but because of how primefaces is wrapped you're going to apply styles to the OUTSIDE of that so the inner rule won't apply.
我认为最好的方法可能是简单地使用一个标准按钮并制作一个复合组件。这完全取决于您使用它的频率、它对站点的重要性以及您需要做什么。基本上 jQueryUI 将呈现一个按钮和一个跨度，但是由于primefaces 的包装方式，您要将样式应用于其外部，因此内部规则将不适用。
As such, I'd make a custom component along the lines of ->
因此，我会按照 ->
<h:commandButton styleClass="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-state-hover" style="${myOverridesHere}">
<p:ajax event="click" ... etc... read the manual/>
</h:commandButton>
The net result is that you're adding "ajax" to the commandButton via the Primefaces API (which lives ontop of the standard JSF2 API. I have not had the need to specifically test this as of yet, but I'm sure that some variation on this would do what you need without forcing an important cascade which is generally bad practice.) For the record, you need the jQueryUI Stylesheets in the page for this to work (obviously).
最终结果是您通过 Primefaces API（它位于标准 JSF2 API 之上。我还没有需要专门测试它，但我确信有些对此的变化可以满足您的需求，而不会强制执行重要的级联，这通常是不好的做法。）为了记录，您需要页面中的 jQueryUI 样式表才能使其工作（显然）。
Hope this helps
希望这可以帮助
回答by Dylan
This inherit value may work:
这个继承值可能有效：
.styleGreen {
background-color: #009900 !important;
font-family: Arial,Helvetica,sans-serif !important;
}
