如何覆蓋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來自定義我的按鈕？

回答

相關問題