如何设置纸张下拉菜单的样式（如何使用 mixins？）答案

【问题标题】：How to style paper-dropdown-menu (how to use mixins?)如何设置纸张下拉菜单的样式（如何使用 mixins？）
【发布时间】：2015-08-18 16:11:26
【问题描述】：

我想设置纸张下拉菜单的样式，特别是元素的纸张输入组件。我想我需要学习/理解 mixins 的工作原理。

我可能需要将 paper-dropdown-menu 的 mixins 与 paper-input-container 的 mixins/自定义属性结合起来，对吗？

https://elements.polymer-project.org/elements/paper-dropdown-menu https://elements.polymer-project.org/elements/paper-input?active=paper-input-container

我什至不知道从哪里开始。该文档建议将大括号中的某些内容作为 mixin 中的默认设置，因此第一步可能类似于：

paper-dropdown-menu {
    --paper-dropdown-menu: {
        something here?
    } 
}

【问题讨论】：

标签： polymer mixins web-component paper-elements

【解决方案1】：

我自己几乎不了解这些东西，但我认为经过很多努力，我可能能够获得足够的洞察力来帮助您入门。

您可以在 ":root" 级别定义要反复使用的变量。（是的，你实际上输入了“:root”。）考虑一下：

<style is="custom-style">
    :root{
        --main-color: rgb(244,67,54);
        --dark-color: rgba(0, 0, 0, 0.258824);
        --light-color: rgb(153, 153, 153);   
        --app-header-background-front-layer-background-image: url(../../img/ConcertChoirSATour.jpg);
        --app-header-background-front-layer-height: 400px;         
    }
</style>

也许您正在使用 Polymer appheader 元素，并且您在文档中看到您可以设置背景：

app-header {     
      --app-header-background-front-layer: {
          /*something or other*/              
      };
      --app-header-background-rear-layer: {
        /*something or other*/
      };
    }

在这里，您可以使用 :root 级别中使用 var() 关键字分配的变量：

app-header {     
      --app-header-background-front-layer: {
          background-image: var(--app-header-background-front-layer-background-image);              
      };
      --app-header-background-rear-layer: {
        /* The header is blue when condensed */
        background-color: var(--main-color);
      };
    }

这里有一些示例代码：

<style is="custom-style">
    :root{
        --main-color: rgb(244,67,54);
        --dark-color: rgba(0, 0, 0, 0.258824);
        --light-color: rgb(153, 153, 153);   
        --app-header-background-front-layer-background-image: url(../../img/ConcertChoirSATour.jpg);
        --app-header-background-front-layer-height: 400px;         
    }

    app-header {     
      --app-header-background-front-layer: {
          background-image: var(--app-header-background-front-layer-background-image);

      };
      --app-header-background-rear-layer: {
        /* The header is blue when condensed */
        background-color: var(--main-color);
      };
    }

    paper-icon-button {
      --paper-icon-button-ink-color: white;
    }

    paper-dropdown-menu {
        --paper-input-container-focus:{
            color: var(--main-color);
        }; 
        --paper-input-container: {
            color: var(--dark-color);
        };
        --paper-input-container-input: {
            color: var(--light-color);
        };
        --paper-input-container-label: {
            color: var(--main-color);
        };
    }
</style>

【讨论】：

这被低估了。很棒的帖子。

【解决方案2】：

你可以在这里找到一些例子：

https://www.polymer-project.org/1.0/docs/devguide/styling.html

【讨论】：