Question

我正在尝试创建不同颜色的PrimeFaces commandButtons 。在我的样式表中，我有类似的东西：

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

这样的组件：

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

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

解决这个问题的正确方法是什么？

Answer 1

简单的解决方案：

如果你在Panel（或Form）中有一个CommandButton：

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

你只需要这样定义你的css：

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

它会很好用（我刚尝试过）

Answer 2

虽然！important可能会这样做，但您应该覆盖themebuilder css文件。查看Primefaces指南，了解如何使用自定义样式表。 Primefaces基本上构建在jQueryUI http://jqueryui.com/上，因此覆盖它。（另外，您可以滚动自定义主题，这通常是更好的选择）。

只需花一些时间来查看它，如果您真的需要自定义组件，可以随意构建标准库并对其进行自定义。因为你开始处理jQuery是一个简单的更新。

我认为最好的方法可能是简单地使用标准按钮并制作复合组件。这完全取决于您使用它的频率，对网站的重要程度以及您需要做的事情。基本上jQueryUI将呈现一个按钮和一个跨度但是由于包含了primefaces的方式，你将把样式应用到OUTSIDE，因此内部规则将不适用。

因此，我将按照 - ＆gt;

的方式制作自定义组件

<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样式表才能使用（显然）。

希望这有帮助

Answer 3

此继承值可能有效：

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

PrimeFaces覆盖我的自定义CSS样式

3 个答案: