如何覆盖PrimeFaces CSS来自定义我的按钮？

我想简单地定制具有PrimeFace一个命令，但我不能设法做...如何覆盖PrimeFaces CSS来自定义我的按钮？

我看了很多答案过网，我已经把这个身体（使它负荷后primeFace的CSS）

<h:outputStylesheet name="css/layout2.css" />

当我与Chrome浏览器开发工具检查，我可以看到按钮具有这种风格：

.ui-button .ui-widget .ui-state-default .ui-corner-all .ui-button-text-icon-left

所以在我的CSS文件，我已经加入这个

.ui-button .ui-widget .ui-state-default .ui-corner-all .ui-button-text-icon-left .mygreen {..}

，这我XHTML：

<ui:define name="content"> 
     <h:form id="formTable"> 
      <p:dataTable> 
       ... 
       ... 
       ... 
       <p:column styleClass="buttonColumn"> 
        <p:commandButton icon="ui-icon-check" styleClass="mygreen" value="test2" id="mybuttontest" value="blabla"/> 


    </p:dataTable> 
    </h:form> 
</ui:define>

但它仍然犯规覆盖背景色！

我在做什么错？

来源

2014-12-07 Johny19

你可以请张贴html布局结构吗？ – 2014-12-07 19:35:52

我用xhtml编辑了这个问题 – Johny19 2014-12-07 20:11:02

我会回答我的问题。看起来，如果我删除点之间的空间，它的作品...

.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-icon-left .mygreen {..}

来源

2014-12-07 23:52:55 Johny19

的确，这是有效的！ – 2015-05-09 10:57:51

-2

试试这个：

.ui-button .ui-widget .ui-state-default .ui-corner-all .ui-button-text-icon-left .mygreen { 
    background-color: green !important; 
}

来源

2014-12-07 21:36:27 Karmacoma

我会远离！重要。这是一个懒惰的人的方法，不理会为什么事情不起作用 – Johny19 2014-12-07 23:50:47

.ui-button, 
button.ui-button.ui-state-default, 
.ui-button.ui-state-default.mycolor { 
    ... 
}

我解决了这个方式，其中mycolor是我的CSS我的课。

来源

2017-08-08 17:07:10

我认为你必须为你想修改的按钮创建一个特定的css。您可以将其命名为#myButton，然后可以在下面的块中定义您需要的css组件。您也可以在commandButton的styleClass中使用相同的名称。

<p:commandButton value="Submit" id ="btnId" styleClass = "myButton"/> 


#myButton .ui-button{ 
    background-color: green 
    background-position: 0px 0px; 
} 

#myButton .ui-button-text-only { 
    padding: .5em .10em; 
}

希望它有帮助！

来源

2017-08-08 17:42:32

如何覆盖PrimeFaces CSS来自定义我的按钮？

回答

相关问题