聚合物：造型纸输入答案

【问题标题】：Polymer: styling paper-input聚合物：造型纸输入
【发布时间】：2015-10-12 07:04:01
【问题描述】：

我想为纸张输入元素的一些属性设置样式。所以我尝试了：

<dom-module id="my-element">
    <style>
        :host {
            --paper-input-container-label: #fff;
            --paper-input-container-label-focus: #fff;
        }
    </style>
    <template>
        <paper-input-container>
            <label>My Label</label>
            <input is="iron-input" value="{{someval}}">
        </paper-input-container>
    </template>
    ...

据我了解，您无法设置样式

<paper-input .... ></paper-input>

你必须使用paper-input-container，对吗？

无论如何，应用在任何东西之上的样式选项都会得到实际样式。但是，例如，当我使用

--paper-input-container-color: #fff;

它确实有效（但不是我想要的）。有什么建议可以解决这个问题吗？

【问题讨论】：

标签： javascript polymer styling

【解决方案1】：

paper-input 提供了几种设置样式的可能性。一些css参数是简单的值——比如你的--paper-input-container-color。其他的——比如--paper-input-container 是混入，你可以在其中调整任何你想要的东西。要重新定义您的 mixin，请参阅文档 here。

查看应用了所有自定义样式的页面标题也很有帮助。例如搜索元素<style scope="paper-input-container"></style> 并查看聚合物定义的内容以及这些样式的应用方式。如果您在模板中添加自己的 <style> 元素，它将位于 <head> 中的某个位置，并注意 css 选择器的转换方式。

希望这些解释能引导你实现你想要的......

【讨论】：

成功了。深入研究样式/头部确实有帮助，但我认为关于这个主题的一些好的文档会让它变得更容易:)