PrimeFaces覆盖我的自定义CSS样式

我正在尝试创建不同颜色的PrimeFaces命令按钮。在我的样式表中，我有如下内容：

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

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

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

以及像这样的组件：

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

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

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

---

此继承值可能有效：

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

而这个！重要提示：您可能需要覆盖themebuilder css文件。查看有关如何使用自定义样式表的Primefaces指南。Primefaces基本上是建立在jQueryUI上的，所以重写它。（此外，您可以滚动自定义主题，这通常是更好的选择）

只要花点时间看看它，如果你真的需要一个自定义组件，你可以自由地在标准库的基础上构建并自定义它。因为您首先要处理jQuery，所以它是一个简单的更新

回应

我认为最好的方法可能是简单地使用一个标准按钮并制作一个复合组件。这完全取决于你使用它的频率、它对网站的重要性以及你需要做什么。基本上，jQueryUI将渲染一个按钮和一个跨度，但由于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将“ajax”添加到commandButton中（它存在于标准JSF2 API之上。我还没有必要专门测试它，但我确信，在此基础上的一些变化可以满足您的需要，而不必强制进行重要的级联，这通常是不好的做法），您需要页面中的jQueryUI样式表才能使其正常工作（显然）

希望这对你们有帮助
简单的解决方案：

如果在这样的面板（或窗体）中有CommandButton：

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

它会很好地工作（我刚刚尝试过）
该组件的实际html输出是什么？此外，是否有PrimeFaces的默认样式表，如果有，其中包含什么？PrimeFaces基于JQuery的系统，相当复杂。Firebug向我展示了我的风格正在被应用，然后被覆盖。这个问题可能会由知道PrimeFaces如何使用JQuery的人来回答。Firebug还应该告诉您是什么选择器覆盖了它。这将是找到css问题解决方案的关键。它很可能被优先级更高的选择器（includes和
id
或另一个
class
与其他内容组合）覆盖，或者被css页面加载顺序中指定的
class
后定义的选择器覆盖。有趣的是，我不知道！重要的关键词。虽然这看起来有点骇人，但我会试试。我试过这个，效果很好，所以我现在要把它作为答案。但它似乎仍然有点鹰派。我想要的是“JQuery/Primefaces”的CSS实现方式。这是一个解决方法，我会一直使用它，直到我有机会弄明白。如果你不想使用！重要的是（我建议您不要这样做，因为这可能会成为维护的噩梦），请尝试更具体地使用CSS类。查看这篇文章：我们总是覆盖内置的PF类，而不使用！重要的是，我已经看了主题内容，但我不想更新所有按钮，只更新我指定的按钮。因此，一个页面可以有一个绿色按钮、一个红色按钮、一个蓝色按钮等。祝你好运，我没有在我的环境中尝试过上述解决方案，但从逻辑上讲，它应该可以覆盖文本/颜色等。。。你们可以对这些令人不快的课程做一个“绿色”版本。好吧，我明天就试试你们的建议。唯一让我犹豫不决的是用EL表达式填充style属性——对我来说，这是将表示层与模型混合在一起。我更喜欢在XHTML文件中设置所有样式的常量，但我们会看看它是如何工作的。对不起，这是一个草图，实际上不要这样做，试试这个想法。如果你最终完成了更大的项目，复合组件将使你的生活更容易/更易于维护。${}将是您的“硬”覆盖。