2015-06-26 14 views
13

Polymer 1,0 zawierać elementy niestandardowe zmiennych CSS, które pozwalają projektować je przy użyciu wbudowanych stylów takich jak:W jaki sposób można użyć zewnętrznego arkusza stylów do stylizowania elementów z polimeru 1.0?

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

To działa i jest fantastyczne. Jak mogę to zrobić, ale używając zewnętrznego arkusza stylów? Dodawanie is="custom-style" do znacznika Link nie wydają się mieć żadnego wpływu, jak następuje nie działa:

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

Odpowiedz

12

Można załadować plik HTML zawierający Twój custom-style jak chcesz z elementem polimerowej:

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

I plik my-custom-style.html będzie zawierać:

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

Jak Polimerowych 1.1, funkcja ta jest teraz Depre Cated. Zobacz here na odpowiedź aktualizacji

+1

Jest to wzór zespół Polymer używa do ich elementów papieru: https://github.com/polymerelements/paper-styles – Zikes

+0

Ale co zrobić, jeśli używasz meteorjs na przykład, gdzie bierze wszystkie pliki css i łączy je automatycznie w jeden? Nie masz żadnego wpływu na to, jak tag stylu jest zapisany w meteodzie, ani nie możesz zaimportować niestandardowego pliku html za pomocą css (cóż, możesz, ale to oznacza, że ​​generujesz więcej żądań http ofc). –

+1

Pamiętaj, że ta metoda jest teraz przestarzała w Polimenie 1.1 (https://www.polymer-project.org/1.0/docs/devguide/styling.html#external-stylesheets). Rzuć okiem na moją odpowiedź (http://stackoverflow.com/questions/32298500/polymer-import-theme-file-with-host-in-styles-has-no-affect/32302856#32302856) na to pytanie. –

Powiązane problemy