Jak zmienić kolor tła papieru-paska narzędzi Polymer (1.0)?

Question

Wczoraj postanowiłem wypróbować Polymer 1.0 i już mam trudności, gdy próbuję stylizować papierowy pasek narzędzi.

Dokumentacja mówi, że kolor tła mogą być zmieniane za pomocą: --paper-Toolbar-tle

Ale jak mogę go używać na CSS?

Próbowałem następujące:

paper-toolbar { 
     --paper-toolbar-background: #e5e5e5; 
    } 

Również w tym:

paper-toolbar { 
     --paper-toolbar { 
      background: #e5e5e5; 
     } 
    } 

Ale nie działało. Jaki jest prawidłowy sposób to zrobić?

Dzięki.

Answer 1

Jeśli stylizujesz ją na swojej stronie głównej, musisz zastosować style za pomocą <style is='custom-style'>. Ma to na celu sprawdzenie niestandardowych właściwości CSS.

Stosowanie jest stosunkowo łatwe. paper-toolbar zapewnia 2 niestandardowe właściwości i jeden mixin. --paper-toolbar-background to właściwość, która zmienia kolor tła paska narzędzi, podczas gdy --paper-toolbar-color zmienia kolor pierwszego planu. --paper-toolbar to mixin zastosowany do paska narzędzi.

Używanie tych właściwości jest takie samo jak stosowanie stylów w elementach. Na przykład:

<style is="custom-style"> 
    paper-toolbar { 
    --paper-toolbar-background: #00f; /* changes the background to blue*/ 
    --paper-toolbar-color: #0f0; /* changes the foreground color to green */ 
    --paper-toolbar: { 
     font-size: 40px; /* Change default font size */ 
    }; /* Notice the semicolon here */ 
    } 
</style> 

Answer 2

Nie mogłem znaleźć rozwiązania tego problemu do niedawna. Mam dwa paski narzędzi i nie chcę zmieniać CSS dla wszystkich pasków narzędzi, tylko pasek narzędzi nagłówka.

Aby zmienić CSS dla każdego paska, w zewnętrznym pliku css dodać następujące:

paper-toolbar.paper-toolbar-0 { 
    background: orange; 
    color: red; 
} 

Jednak to nie rozwiązuje problemu. Aby zmienić pojedynczy pasek papieru na podstawie klasy tak:

<paper-toolbar class="header"> 
    ... 
</paper-toolbar> 

Powyższy wykorzystuje klasę o nazwie „header”, więc w moim CSS I dodaje:

paper-toolbar.header { 
    background: orange; 
    color: red; 
} 

... i to działało ! Yay! Oznacza to, że powinieneś być w stanie zastąpić dowolny CSS dowolnego innego elementu wykonującego to samo. To jest całkowicie nieprzetestowane, ale myślę, że powinno działać:

<elementName>.<classname> { 
    ... 
} 

Mam nadzieję, że to wszystko pomaga!