PrimeFaces覆盖我的自定义CSS样式 [英] PrimeFaces overrides my custom CSS style

问题描述

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

  .styleGreen {
 background-color：＃009900; 
 font-family：Arial，Helvetica，sans-serif; 
} 
  

这样的组件：

 < p：commandButton value =Green ButtonstyleClass =styleGreen... 
  

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

修复此问题的正确方法是什么？

解决方案

解决方案：

如果你在一个面板（或一个窗体）中有一个CommandButton：

 < h：form ....> 
< p：commandButton value =Green ButtonstyleClass =styleGreen... /> 
< / h：form> 
  

你只需这样定义你的css：

  form .styleGreen {
 background-color：＃009900; 
 font-family：Arial，Helvetica，sans-serif; 
} 
  

它会工作得很好>

I am trying to create PrimeFaces commandButtons of different colors. In my stylesheet I have something like this:

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

And the component like this:

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

This works when the commandButton is not inside a PrimeFaces panel or some other container. But when I move it into the body of my page, all the custom CSS rules are overridden.

What is the right way of fixing this?

解决方案

Simple solution for you guys:

If you have a CommandButton in a Panel (or a Form) like that:

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

You just define your css like this:

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

It will work very well (I've just tried it)

这篇关于PrimeFaces覆盖我的自定义CSS样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！