如何样式聚合物下拉菜单箭头

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细节到底书面和推广它

您还可以使用任何纸张输入容器和纸张菜单按钮样式混合和自定义属性分别设置内部输入和菜单按钮的样式。