ポリマーのドロップダウンメニューのスタイル方法

Question

ポリマーには新しく、ドキュメントは例では少し明るいようです。私は青い背景のすべてが白であるように、ドロップダウンメニューのスタイルをとろうとしています。たいていのもの（タブ、トーストなど）は機能していますが、ドロップダウンメニューでは灰色以外の小さな矢印ボタンは表示されません。

Example JSBin

スタイリングコードは次のとおりです。

<style> 
    :host { 
    display: block; 

    /* Main vars */ 
    --ki-teal: #4790A8; 
    --paper-tabs-selection-bar-color: #fff; 
    --paper-tab-ink: #fff; 

    /* Toolbar colours */ 
    paper-toolbar.ki { 
     --paper-toolbar-background: var(--ki-teal); 
    } 

    /* Project select dropmenu colours */ 
    paper-dropdown-menu-light.ki { 
     --paper-dropdown-menu-color: #fff; 
     --paper-dropdown-menu-focus-color: #fff; 
     --paper-dropdown-menu-button: { 
     color: #fff; 
     } 
     --paper-input-container-color: var(--ki-teal); 
     --paper-input-container-focus-color: #fff; 
     --paper-dropdown-menu-input: { 
     border-bottom: none; 
     }; 
    } 

    /* Notifications */ 
    #toastSave { 
     --paper-toast-background-color: var(--ki-teal); 
     --paper-toast-color: white; 
    } 

    } 
</style> 

しかし--paper-dropdown-menu-buttonはどんな効果があるとは思われない、または私は右のそれを使用していませんよ。どんな指導も高く評価

さらに、ドロップダウンにフォーカスがあるときに下線バーがアクティブなタブバーと正しく位置合わせされていない（少なくともChrome/Windowsでは）ことがわかります。私はそれがちょうど<style>セクションで世話をする必要がある場合を除き、それは最終的に解決されるポリマーのCSSのグリッチだと思いますか？あなたのpaper-dropdown-menuクラスの

Answer 1

使用--iron-icon-fill-colorあなたは、あなたがしたい場合hostでそれを使用することができますスタイル他、スタイルにしたくないこれも他のiron-iconsを持っているしたい場合。

これを行うもう1つの方法は、mixinに色を与えることです--paper-dropdown-menu-icon。 paper-dropdown-menudocumentationあたりとして、それは内部のアイコン

最後に適用されるミックスイン

であるあなたがpaper-dropdown-menu-lightのcodeを見れば、あなたはアイコンが--disabled-text-colorとしてデフォルト値を持っていることに気づくでしょう。あなたがこのトリックを行うべきであるこの値を変更するならば。このメソッドを使用しないことをお勧めします。これは、これがマテリアルデザインテーマのデフォルト変数であり、Polymerはこれを多くの場所でデフォルト値として使用しています。だから、あなたが何をしているのかを知るまで、この方法を避けてください。

ポリマーでは、ある要素が他の要素を内部的に使用している場合、内部要素のスタイルガイドを参照して直接使用することができます。ここで我々はpaper-dropdown-menu

内にあるアイコンのスタイルをiron-iconsスタイルを使用しているように私は、ポリマーが直接自分のスタイリングガイドでこれを言及しているとは思わないが、あなたはpaper-dropdown-menuのstyling詳細の最後に書かれたこのディテールを見つけて、一般化することができます

また、用紙入力コンテナと用紙メニューボタンのスタイルミックスインとカスタムプロパティを使用して、それぞれ内部入力とメニューボタンのスタイルを設定することもできます。