2015-06-26 6 views
13

Polymer 1.0 Elemente benutzerdefinierte CSS-Variablen enthalten, die Ihnen erlauben, sie stylen Inline-Styles als solche mit:Wie kann ein externes Stylesheet verwendet werden, um Polymer 1.0 Elemente zu stylen?

<style is="custom-style"> 
    paper-toolbar { 
    --paper-toolbar-color: blue; 
    } 
</style> 

Das funktioniert und ist fantastisch. Wie kann ich dasselbe erreichen, aber ein externes Stylesheet verwenden? Hinzufügen is="custom-style" zum Link-Tag scheint keine Wirkung zu haben, wie die folgenden nicht funktioniert:

<link rel="stylesheet" media="all" href="app.css" is="custom-style"> 

Antwort

12

können Sie die HTML-Datei laden mit Ihrem custom-style wie würden Sie mit einem Polymerelement:

<link rel="import" href="my-custom-style.html"> 

Und Ihre my-custom-style.html Datei enthalten würde:

<style is="custom-style"> 
    paper-toolbar { 
     --paper-toolbar-color: blue; 
    } 
</style> 

Ab Polymer 1.1 ist diese Funktion jetzt depre cated. Siehe here für eine Aktualisierung Antwort

+1

Dies ist das Muster, das Polymer-Team für ihre Papierelemente: https://github.com/polymerelements/paper-styles – Zikes

+0

Aber was tun Sie, wenn Sie meteorjs zum Beispiel verwenden, Wo nimmt es alle CSS-Dateien und verkettet sie automatisch zu einem? Sie haben keinen Einfluss darauf, wie das Style-Tag in meteor geschrieben ist, noch können Sie eine benutzerdefinierte html-Datei mit dem CSS importieren (naja, Sie könnten das, aber das bedeutet, dass Sie mehr http-Anfragen generieren) –

+1

Bitte beachten Sie, dass diese Methode in Polymer 1.1 veraltet ist (https://www.polymer-project.org/1.0/docs/devguide/styling.html#external-stylesheets). Werfen Sie einen Blick auf meine Antwort (http://stackoverflow.com/questions/32298500/polymer-import-theme-file-with-host-in-styles-has-no-affect/32302856#32302856) auf diese Frage. –

Verwandte Themen