如何樣式聚合物下拉菜單箭頭

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上）下拉列表中的下劃線欄與活動選項卡欄未正確對齊。我想這只是一個聚合物CSS故障，最終會得到解決，除非我需要在<style>部分中處理這個問題。

Answer 1

使用--iron-icon-fill-color在paper-dropdown-menu類，如果你想有其他iron-icons還你不想風格，否則，如果你願意，你可以使用風格它host。

這樣做的另一種方法是給mixin --paper-dropdown-menu-icon提供顏色。按照paper-dropdown-menudocumentation是

如果你看看paper-dropdown-menu-light的code你會發現圖標的默認值--disabled-text-color被應用到內部圖標

最後，一個mixin。所以，如果你改變這個值應該爲你做的伎倆。我建議不要使用這種方法，因爲這是材料設計主題的默認變量，而Polymer已經在很多地方將它用作默認值。所以，除非知道你在做什麼，否則避免這種方法。

在Polymer中，如果某個元素在內部使用某個其他元素，則始終可以引用內部元素的樣式指南並直接使用它。就像我們在這裏使用iron-icons樣式風格，裏面paper-dropdown-menu

我不認爲聚合物在他們的造型指南已直接提到這個圖標，但你可以找到這個細節在的paper-dropdown-menustyling細節到底書面和推廣它

您還可以使用任何紙張輸入容器和紙張菜單按鈕樣式混合和自定義屬性分別設置內部輸入和菜單按鈕的樣式。