css - PrimeFaces:如何覆盖CSS类

创建按钮后，将始终应用ui-corner-all类。我尝试了以下方法:

<p:commandButton id="like" styleClass="ui-corner-right" />

但这没用。在Firebug上，我同时看到了ui-corner-all和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">

更新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>

更新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，您可以在其中重新定义ui-corner-all和ui-corner-right类。

.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
}

您还可以应用其他CSS类，该类将覆盖不需要的属性。

关于css - PrimeFaces:如何覆盖CSS类，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11134556/

Corner

css - PrimeFaces:如何覆盖CSS类