Polymer 如何设置纸张下拉菜单的样式（如何使用mixin？）

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

我可能需要将纸张混合下拉菜单与纸张输入容器的混合/自定义属性相结合，我的想法对吗

我甚至不知道从哪里开始。doc在mixin中默认使用大括号，因此第一步可能类似于：

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

---

您可以在这里找到一些示例：

---

我自己几乎不懂这些东西，但我想经过很多努力，我也许能够有足够的洞察力让你开始

您可以在“：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>

在这里，您可以使用var（）关键字在：根级别中指定的变量：

下面是一些示例代码：

<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>

：根{
--主色：rgb（244,67,54）；
--深色：rgba（0,0,0,0.258824）；
--浅色：rgb（153、153、153）；
--应用程序标题背景前端层背景图像：url（../../img/concertcoorsatour.jpg）；
--app头背景前层高度：400px；
}
应用程序头{
--应用程序标题背景前端层：{
背景图像：var（--应用程序标题背景前端层背景图像）；
};
--应用程序标题背景后层：{
/*压缩时标题为蓝色*/
背景色：var（--主色）；
};
}
纸张图标按钮{
--纸张图标按钮墨水颜色：白色；
}
纸张下拉菜单{
--纸张输入容器焦点：{
颜色：var（--主色）；
}; 
--纸张输入容器：{
颜色：var（--深色）；
};
--纸张输入容器输入：{
颜色：var（--浅色）；
};
--纸张输入容器标签：{
颜色：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>