PrimeFaces: cách ghi đè lên lớp CSS

Question

Khi nút được tạo, lớp ui-corner-all luôn được áp dụng. Tôi đã thử các cách sau:

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

nhưng nó không hoạt động. On Firebug, tôi thấy cả hai ui-corner-all và 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:

Tiếp theo gợi ý từ JMelnik, cuối cùng tôi đã thành công để thay đổi phong cách của ui-corner-all để ui-corner-right bằng cách thêm đoạn mã sau:

<style type="text/css"> 
    #myForm\:likeButton .ui-corner-all { 
     border-radius: 6px 0px 0px 6px !important; 
    } 
</style> 

và quấn <p:commandButton> bên trong <h:panelGroup> như sau:

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

UPDATE 2:

Nhờ gợi ý BalusC, những giải pháp sau đây cần được tốt hơn:

<style type="text/css"> 
    .likeButton .ui-corner-all { 
     border-radius: 6px 0px 0px 6px !important; 
    } 
</style> 

<h:panelGroup styleClass="likeButton"> 
    <p:commandButton /> 
<h:panelGroup> 

Trân trọng,

Answer 1

Sử dụng CSS override cách tiêu chuẩn.

Bao gồm * .css trong trang của bạn, nơi bạn xác định lại các lớp ui-corner-all và 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 
} 

Bạn cũng có thể áp dụng lớp css bổ sung sẽ ghi đè các thuộc tính không mong muốn.