ポリマー要素にスタイリングを適用するにはどうすればよいですか？

Question

私はドキュメントを読むことを試みてきましたが、私はそれを得ていません。 stackoverflowに関する質問もありません。現在、MVC 5のPolymer v1.0を使用しています。

たとえば、ペーパーツールバーを使用しましょう。私はこのサンプルコードを持っています：

<paper-toolbar> 
    <paper-icon-button icon="menu"></paper-icon-button> 
    <span class="title">My Title</span> 
    <paper-icon-button icon="refresh"></paper-icon-button> 
    <paper-icon-button icon="add">+</paper-icon-button> 
</paper-toolbar> 

どのように白い背景を適用しますか？

In the polymer website:

私はカスタムプロパティとミックスインがあることを見てきました...しかし、私はそれらをどのように使うのですか？

たとえば、「--paper-toolbar-background」をどのように上書きしますか？背景を白くするには？

ありがとうございます！

Answer 1

私が推奨するアプローチは、スタイリングの目的のための要素を持っています。たとえば、app-theme.htmlです。それを要素ディレクトリの中に入れ、インポートします。

あなたapp-theme.htmlは、次のような場合は、それが正しく紙ツールバーのスタイルを設定する必要があります

<style is="custom-style"> 
    paper-toolbar { 
     --paper-toolbar-background: var(--paper-blue-900); 
    } 
</style> 

私は紙の要素のため、このアプローチを使用します。カスタム要素については、各要素の内部にスタイリングを配置しました。

理論的には、上記のコードを使用して要素を使用する直前に貼り付けることもできますが、この方法では既定のスタイルが適用されてブレークするという問題があります。

普通のapp.cssファイルを使用して紙の要素をスタイルすることもできますが、!important属性を使用して要素の既定のスタイルを上書きする必要があります。しかし、それをお勧めしないでください。

希望します。

George