Wie style native DOM-Elemente in Onsen UI?

Question

Ich habe Probleme beim Überschreiben von Standardstilen in der Onsen-Benutzeroberfläche.

Dies liegt daran, dass native Selektoren eine höhere Spezifität aufweisen, z. wenn ich

h1 { color: red; } 

haben wird dies durch die nativen

.page h1 { color: green; } /* dummy example */ 

... die lange, tedius CSS-Selektoren schreiben führt mich übertönt.

Mit Onsen-Komponenten (d. H. Elemente Anfang <ons-*) können Sie Modifikatoren verwenden, um benutzerdefinierte Stile festzulegen.

Aber was ist mit nativen Elementen?

Die docs erwähnen CSSNext, also dachte ich, great !, Ich werde nur einige Verschachtelung verwenden:

.something { 
    & h1 { color: red; } 
} 

... aber keine Würfel. Es scheint, dass, obwohl Onsen CSSNext für seine eigenen Komponenten verwendet, es keine eigenen, benutzerdefinierten CSS-Blätter durch es laufen lässt.

Irgendwelche Gedanken?

Answer 1

Ich konnte einige Änderungen vornehmen, indem ich meine eigenen Stile an den unteren Rand der Datei onsenui.css anfügte.

Eg.

Um die Hintergrundfarbe einer ons-Seite zu ändern, die eine id = "login" hat, habe ich dies:

#login .page__background { 
    background-color: #cfebdc; 
} 

ein Logo-Klasse zu erstellen:

.home-logo { 
    display: block; 
    margin: 10% auto; 
    width: 60%; 
} 

Des Weiteren Sie kann "create" Ihre eigenen Modifikator wie folgt aus (in die onsen-CSS-components.css Datei anhängen):

.text-input--mymod { 
    text-align: center; 
    color: #00ff00; 
} 

Und verwenden sie es als modi fier:

<ons-input modifier="mymod" type="password" placeholder="Your password"></ons-input> 

Das funktionierte gut für mich. Hoffe, das gibt dir eine bessere Idee. Sie können mehr über Ons Elemente Kompilation auf dem docs

lesen