PrimeFaces覆盖我的自定义CSS样式

Question

我正在尝试创建不同颜色的PrimeFaces commandButtons.在我的样式表中我有这样的东西:

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

和这样的组件:

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

这工作时的commandButton是不是一个PrimeFaces内部面板或其他一些容器.但是当我将它移动到我的页面主体时,所有自定义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;
}

它会工作得很好(我刚试过)