특정 mixin (polymer 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

입니다. mixins 뒤에 세미콜론을 써야합니다. 왜냐하면 그들은 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> 

또 다른 것은, 당신이 초점의 입력의 테두리 색상 스타일을 시도하지만, 또한 당신이 이해가되지 않는 displaynone에 설정된다. display: none을 제거하고 색을 지정하려면 border-color: red;을 --paper-input-container-underline-focus에 추가해야합니다.