PrimeFaces:如何覆盖 CSS 类

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11134556/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 04:15:18  来源:igfitidea点击:

PrimeFaces: how to override CSS class

cssjsf-2primefacesstyling

提问by Mr.J4mes

When a button is created, the class ui-corner-allis always applied. I tried the following:

创建按钮时,ui-corner-all始终应用该类。我尝试了以下方法:

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

but it didn't work. On Firebug, I saw both ui-corner-alland ui-corner-right:

但它没有用。在 Firebug 上,我看到了ui-corner-allui-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:

更新1:

Following the hint from JMelnik, I finally succeeded to change the style of ui-corner-allto ui-corner-rightby adding the following script:

继从JMelnik提示,我终于成功地改变风格ui-corner-all,以ui-corner-right加入下面的脚本:

<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:

并将<p:commandButton>内部包裹<h:panelGroup>如下:

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

UPDATE 2:

更新 2:

Thanks to BalusC's suggestion, the following solution should be better:

感谢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>

Best regards,

此致,

采纳答案by JMelnik

Use a standard CSS override way.

使用标准的 CSS 覆盖方式。

Include a *.css in your page, where you redefine ui-corner-alland ui-corner-rightclasses.

在您的页面中包含一个 *.css,您可以在其中重新定义ui-corner-allui-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
}

You can also apply additional css class which would override undesired properties.

您还可以应用额外的 css 类来覆盖不需要的属性。