聚合物：定型纸输入

Question

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

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

它确实有效（但不是我想要的）。有什么解决方法的建议吗？

Answer 1

paper-input provides several possibilities to style it. Some css parameters are simple values - such as your --paper-input-container-color. Others – like --paper-input-container are mixins where you can adjust anything you want. To re-define your mixin see the docs here.

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

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

聚合物：定型纸输入

Polymer: styling paper-input

javascript

styling

polymer