PrimeFaces：如何覆盖 CSS 类

Question

当一个按钮被创建时，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>

最好的问候，

Answer 1

使用标准的 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 类来覆盖不需要的属性。