PrimeFaces überschreibt meinen benutzerdefinierten CSS-Stil

Question

Ich versuche PrimeFaces commandButtons in verschiedenen Farben zu erstellen. In meinem Sheet habe ich so etwas wie dieses:

.styleGreen {  
    background-color: #009900; 
    font-family: Arial,Helvetica,sans-serif; 
} 

und die Komponente wie folgt aus:

<p:commandButton value="Green Button" styleClass="styleGreen" ... 

Dies funktioniert, wenn die commandnicht innerhalb eines PrimeFaces ist Panel oder ein anderer Behälter . Aber wenn ich es in den Hauptteil meiner Seite verschiebe, werden alle benutzerdefinierten CSS-Regeln außer Kraft gesetzt.

Was ist der richtige Weg, um dies zu beheben?

Answer 1

Einfache Lösung für euch:

Wenn Sie ein Command in einem Gremium (oder eine Form) wie folgt aus:

<h:form .... > 
    <p:commandButton value="Green Button" styleClass="styleGreen" ... /> 
</h:form> 

definieren Sie einfach Ihre css wie dies:

form .styleGreen {  
    background-color: #009900; 
    font-family: Arial,Helvetica,sans-serif; 
} 

Es wird sehr gut funktionieren (Ich habe es gerade versucht)

Answer 2

Dieser Wert inherit arbeiten kann:

.styleGreen {  
    background-color: #009900 !important; 
    font-family: Arial,Helvetica,sans-serif !important; 
} 

Answer 3

Während die wichtigen könnte es tun, sollten Sie vielleicht die Themebuilder CSS-Dateien überschreiben. Sehen Sie sich den Leitfaden zu Primefaces zur Verwendung eines benutzerdefinierten Stylesheets an. Primefaces ist grundsätzlich auf jQueryUI http://jqueryui.com/ aufgebaut, also überschreiben Sie es. (Sie können auch ein benutzerdefiniertes Thema erstellen, das oft die bessere Wahl ist).

Nehmen Sie sich einfach etwas Zeit und wenn Sie wirklich eine benutzerdefinierte Komponente benötigen, können Sie die Standardbibliothek erstellen und anpassen. Da Sie mit jQuery arbeiten, ist es ein einfaches Update.

Als Reaktion

Ich denke, der beste Weg einfach sein könnte, eine Standard-Schaltfläche verwenden und einen Verbundbauteil zu machen. Es hängt ganz davon ab, wie oft Sie es verwenden, wie wichtig es für die Website ist und was Sie tun müssen. Grundsätzlich rendert jQueryUI einen Button und einen Bereich, aber aufgrund der Art und Weise, wie die Flächen umhüllt sind, werden Sie Styles auf den OUTSIDE-Bereich anwenden, so dass die innere Regel nicht angewendet wird.

Als solches würde ich eine eigene Komponente entlang der Linien machen ->

<h:commandButton styleClass="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-state-hover" style="${myOverridesHere}"> 
    <p:ajax event="click" ... etc... read the manual/> 
</h:commandButton> 

Das Nettoergebnis ist, dass Sie „Ajax“, um auf den Befehls über die Primefaces-API hinzugefügt (was lebt ontop der Standard-JSF2-API. Ich hatte nicht die Notwendigkeit, dies noch zu testen, aber ich bin mir sicher, dass einige Variationen das tun würden, was Sie brauchen, ohne eine wichtige Kaskade zu erzwingen, die in der Regel schlecht ist , Sie benötigen die jQueryUI Stylesheets auf der Seite, damit dies funktioniert (offensichtlich).

hoffe, das hilft