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

给你们的简单解决方案:

如果您在面板(或表单)中有一个这样的命令按钮:

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

您只需像这样定义您的 css:

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

它会很好用(我刚试过)