如何设置Polymer下拉菜单箭头的样式

Question

Polymer的新手，文档似乎对示例有点“轻松”。我正在尝试设置一个下拉菜单，以便在蓝色背景上一切都是白色的。大多数东西（标签，烤面包等）都在工作，但下拉菜单固执地拒绝显示除了阴暗灰色之外的任何小箭头按钮。

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上）下拉列表具有焦点时下划线栏未与活动标签栏正确对齐。我想这只是一个Polymer CSS故障，最终会解决，除非我需要在<style>部分处理这个问题吗？

Answer 1

如果您还希望其他--iron-icon-fill-color您不想设置样式，请在paper-dropdown-menu课程中使用iron-icons，否则您可以在host中使用--paper-dropdown-menu-icon样式你想要的。

另一种方法是为mixin paper-dropdown-menu提供颜色。根据{{​​1}} documentation，它是

  

应用于内部图标的mixin

最后，如果您查看paper-dropdown-menu-light的{​​{3}}，您会发现图标的默认值为--disabled-text-color。所以，如果你改变这个值应该为你做的伎俩。我建议不要使用这种方法，因为这是材料设计主题的默认变量，而Polymer在很多地方使用它作为默认值。所以，除非知道你在做什么，否则不要采用这种方法。

在Polymer中，如果元素在内部使用其他元素，则可以始终引用内部元素的样式指南并直接使用它。就像这里一样，我们使用iron-icons样式来设置paper-dropdown-menu

内的图标的样式

我不认为Polymer在他们的造型指南中直接提到了这一点，但您可以在code styling详细信息的末尾写下这个详细信息并将其概括为

  

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