Question

我试图用PrimeFace简单地定制一个commandButton，但我无法做到这一点......

我已经通过网络阅读了很多答案，并且我已将其放入正文中（以使其在primeFace＆＃39; sss之后加载）

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

当我使用chrome dev工具查看时，我可以看到该按钮具有以下样式：

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

但它仍然没有覆盖背景颜色！

我做错了什么？

Answer 1

我会回答我自己的问题。看来，如果我删除点之间的空间就行了......

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

Answer 2

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

我解决了这个问题，mycolor是我的CSS中的班级。

Answer 3

我认为您必须为要修改的按钮创建特定的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;
}

希望它有所帮助!!

Answer 4

试试这个：

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

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

4 个答案: