如何使用某些mixin（聚合物2）设置纸张输入风格？

Question

我试图根据我得到的设计来创建纸张输入风格。我使用了here中描述的一些自定义属性，但并不是所有这些属性都适用。

我有使用问题--paper输入容器标签和--paper输入容器输入聚焦。

也许我会尝试错误地使用它们，或者它需要一些额外的步骤。

这里是我的代码

<link rel="import" href="../polymer/polymer-element.html"> 
<link rel="import" href="../paper-input/paper-input.html"> 
<link rel="import" href="../paper-input/paper-input-container.html"> 
<link rel="import" href="../iron-icons/iron-icons.html"> 
<link rel="import" href="../iron-icon/iron-icon.html"> 

<dom-module id="first-element"> 
    <template> 
    <style> 
     paper-input { 
     --paper-input-container-color: rgb(64, 64, 64); 
     --paper-input-container-focus-color: rgb(64, 64, 64); 

     --paper-input-container: { 
      border: none; 
      padding: 0px; 
     } 


     --paper-font-subhead: { 
      font-size: 100%; 
     } 

     --paper-input-container-underline-focus: { 
      display: none; 
     } 

     --paper-input-container-underline: { 
      display: none; 
     } 

     --paper-input-container-input: { 
      height: 24px; 
      line-height: 20px; 
      padding: 0 4px; 
      border: 1px solid rgb(194, 198, 199); 
     } 

     --paper-input-container-input-focus: { 
      border-color:red; 
     } 

     --paper-input-container-label { 
      font-weight: bold; 
     }  

     --paper-input-container-invalid-color: red; 
     } 

     :host { 
     display: block; 
     } 
    </style> 

    <paper-input always-float-label label="Floating label"></paper-input> 
    <paper-input label="username"> 
     <iron-icon icon="icons:accessible" slot="prefix"></iron-icon> 
     <div slot="suffix">@email.com</div> 
    </paper-input> 


    </template> 

    <script> 
    class FirstElement extends Polymer.Element { 
     static get is() { return 'first-element'; } 
     static get properties() { 
     return { 
      prop1: { 
      type: String, 
      value: 'first-element' 
      } 
     }; 
     } 
    } 

    window.customElements.define(FirstElement.is, FirstElement); 
    </script> 
</dom-module> 

Answer 1

我不知道是什么导致你期望，所以很难帮你，但有一点我可以肯定这是你的风格标签是如此凌乱。你需要在mixin之后编写一个分号，因为它们就像css属性，每个css属性都是用分号分隔的。
试试你的代码，这样的：

<style> 
    :host { 
    display: block; 
    } 

    paper-input { 
    --paper-input-container-color: rgb(64, 64, 64); 
    --paper-input-container-focus-color: rgb(64, 64, 64); 

    --paper-input-container: { 
     border: none; 
     padding: 0px; 
    }; 

    --paper-font-subhead: { 
     font-size: 100%; 
    }; 

    --paper-input-container-underline-focus: { 
     display: none; 
    }; 

    --paper-input-container-underline: { 
     display: none; 
    }; 

    --paper-input-container-input: { 
     height: 24px; 
     line-height: 20px; 
     padding: 0 4px; 
     border: 1px solid rgb(194, 198, 199); 
    }; 

    --paper-input-container-input-focus: { 
     border-color: red; 
    }; 

    --paper-input-container-label: { 
     font-weight: bold; 
    }; 

    --paper-input-container-invalid-color: red; 
    } 
</style> 

另一件事，你想样式焦点输入的边框颜色，而且要设置display到none这没有任何意义。如果要设置颜色的样式，则必须删除display: none并将border-color: red;添加到--paper-input-container-underline-focus。