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为其设计风格提供了多种可能性。一些css参数是简单的值 - 例如您的--paper-input-container-color。其他人 - 比如--paper-input-container是mixins，你可以调整你想要的任何东西。要重新定义您的mixin，请参阅文档here。

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

希望这些解释能够引导您实现您想要的目标......

聚合物：造型纸输入

1 个答案: