PrimeFaces：如何覆盖CSS类

问题描述

创建按钮时，将始终应用 ui-corner-all 类。我试过以下：

 < p：commandButton id =likestyleClass =ui-corner-right/> ; 
  

但它不工作。在Firebug上，我看到了 ui-corner-all 和 ui-corner-right ：

 < div id =form1：liketype =buttonclass =ui-button ui-widget ui-state-default ui-corner -all ui-button-text-icon-left ui-corner-right> 
  

更新1：

根据JMelnik的提示，我终于成功地将 ui-corner-all 的风格更改为 ui-corner-right 添加以下脚本：

 < style type =text / css> 
＃myForm\：likeButton .ui-corner-all {
 border-radius：6px 0px 0px 6px！important; 
} 
< / style> 
  

并将< p：commandButton> < h：panelGroup> 如下：

  h：form id =myForm> 
< h：panelGroup id =likeButton> 
< p：commandButton /> 
< h：panelGroup> 
< / h：form> 
  

UPDATE 2：

由于BalusC的建议，以下解决方案应该更好：

 < style type =text / css > 
 .likeButton .ui-corner-all {
 border-radius：6px 0px 0px 6px！important; 
} 
< / style> 
 
< h：panelGroup styleClass =likeButton> 
< p：commandButton /> 
< h：panelGroup> 
  

最好的问候，

解决方案

使用标准的CSS覆写方式。

在网页中加入* .css， c $ c> ui-corner-all 和 ui-corner-right 类。

 的.ui刀尖所有{
 // ovverides呢，你还可以定义你想在这里的任何属性
} 
 
的.ui角向右{
 //定义这将覆盖不必要的行为
} 
   
 
 
您还可以申请额外的CSS类，这将覆盖不需要的属性。
 
When a button is created, the class ui-corner-all is always applied. I tried the following: 
<p:commandButton id="like" styleClass="ui-corner-right" />
but it didn't work. On Firebug, I saw both ui-corner-all and ui-corner-right:
<div id="form1:like" type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left ui-corner-right">
UPDATE 1:
Following the hint from JMelnik, I finally succeeded to change the style of ui-corner-all to ui-corner-right by adding the following script:
<style type="text/css">
    #myForm\:likeButton .ui-corner-all {
        border-radius: 6px 0px 0px 6px !important;
    }
</style>
and wrap the <p:commandButton> inside <h:panelGroup> as following:
<h:form id="myForm">
    <h:panelGroup id="likeButton">
        <p:commandButton />
    <h:panelGroup>
</h:form>
UPDATE 2:
Thanks to BalusC's suggestion, the following solution should be better:
<style type="text/css">
    .likeButton .ui-corner-all {
        border-radius: 6px 0px 0px 6px !important;
    }
</style>  

<h:panelGroup styleClass="likeButton">
    <p:commandButton />
<h:panelGroup>
Best regards,
 解决方案 
Use a standard CSS override way.
Include a *.css in your page, where you redefine ui-corner-all and ui-corner-right classes. 
.ui-corner-all {
    //ovverides to nothing, you can also define any properties you want here
}

.ui-corner-right {
    //define properties  which would override unwanted behaviour
}
You can also apply additional css class which would override undesired properties.
                        
这篇关于PrimeFaces：如何覆盖CSS类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！