PrimeFaces覆盖了我的自定义CSS样式

Question

我正在尝试创建不同颜色的PrimeFaces commandButtons。在我的样式表中，我有如下代码：

.styleGreen {    
    background-color: #009900;
    font-family: Arial,Helvetica,sans-serif;
}

这是一个组件示例：

 <p:commandButton value="Green Button" styleClass="styleGreen" ...

当commandButton不在PrimeFaces的panel或其他容器中时，这个方法是可行的。但是当我将它移动到页面主体中时，所有自定义的CSS规则都被覆盖了。

该如何正确解决这个问题呢？

- AlanObject

---

该组件的实际HTML输出是什么？另外，PrimeFaces是否有默认样式表？如果有，其中包含什么内容？ - ScottS

PrimeFaces基于JQuery系统，相当复杂。Firebug向我展示了我的样式被应用然后被覆盖的情况。这个问题可能会被一个知道PrimeFaces如何使用JQuery的人回答。 - AlanObject

Firebug 还应该告诉您哪个选择器正在覆盖它。这将是找到解决 CSS 问题的关键。很可能它被具有更高优先级的选择器（包括 id 或另一个 class 与其他内容组合）或在页面加载顺序中定义在您的 class 指定之后的选择器所覆盖。 - ScottS

Answer 1

给大家提供一个简单的解决方案：

如果您在面板（或表单）中有一个CommandButton，如下所示：

<h:form .... >
    <p:commandButton value="Green Button" styleClass="styleGreen" ... />
</h:form>

您只需像这样定义您的CSS：

form .styleGreen {    
    background-color: #009900;
    font-family: Arial,Helvetica,sans-serif;
}

它会非常好地工作（我刚试过了）

- Ken

Answer 2

虽然 !important 可以实现，但最好覆盖 themebuilder css 文件。请查看 Primefaces 指南以了解如何使用自定义样式表。Primefaces 基本上是构建在 jQueryUI 上的 http://jqueryui.com/ 所以要进行覆盖（此外，您可以只滚动一个自定义主题，这通常是更好的选择）。

只需花点时间查看它，如果您真的需要自定义组件，请随意使用标准库并对其进行定制。既然你一开始就涉及到 jQuery，那么更新就很容易。

我认为最好的方法可能是简单地使用标准按钮并创建复合组件。这完全取决于您使用的频率，它对站点的重要性以及您需要做什么。基本上，jQueryUI 将呈现一个按钮和一个 span，但由于 primefaces 如何包装，因此您将将样式应用于其外部，因此内部规则将不适用。

因此，我会按照以下方式制作自定义组件 ->

<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>

总的来说，通过Primefaces API（建立在标准JSF2 API之上）向commandButton添加“ajax”。我目前还没有特别测试过这一点，但我相信稍作修改即可实现您需求的功能，而不会强制进行重要级联，这通常是不好的做法。需要注意的是，页面中需要包含jQueryUI样式表才能使其正常运行。

希望这可以帮到你。

- Daniel B. Chapman

---

我已经查看了主题相关的内容，但我不想更新所有按钮，只想更新我指定的按钮。因此，一个页面可以有一个绿色按钮，一个红色按钮，一个蓝色按钮等等。 - AlanObject

祝您好运，我在我的环境中没有尝试过上述解决方案，但从逻辑上讲，它应该可以覆盖文本/颜色等... 您总是可以创建一个“绿色”的版本来替换有问题的类。 - Daniel B. Chapman

好的，我明天会尝试你所建议的。唯一让我犹豫的是使用EL表达式填充样式属性——对我来说，这是将表示层与模型混合在一起。我更喜欢将所有样式常量放在XHTML文件中，但我们会看看它的效果如何。 - AlanObject

抱歉 - 那只是一个草图 - 不要真的这样做，只是尝试一下它的想法。如果您最终要进行更大的项目，则组合组件将使您的生活变得更加轻松/易于维护。 ${} 将是您的“硬”覆盖。 - Daniel B. Chapman

Answer 3

这个继承的值可能会起作用：

.styleGreen {    
  background-color: #009900 !important;
  font-family: Arial,Helvetica,sans-serif !important;
}

- Dylan

---

有趣的是——我不知道!important关键字。虽然它看起来有点hacky，但我会尝试一下。 - AlanObject

我尝试了这个方法，并且它可行，所以我暂时会将其标记为答案。但是它似乎还有些鹰派。我想要的是使用“JQuery / Primefaces”进行CSS的方法。这只是一个解决方法，我会在有机会弄清楚它之前继续使用它。 - AlanObject

如果您不想使用!important（我建议您不要这样做，因为它可能会成为维护的噩梦），请尝试更具体地使用您的CSS类。请查看此帖子：http://css-tricks.com/specifics-on-css-specificity/我们经常在不使用!important的情况下覆盖内置的PF类。 - jjross