css - 如何使用某些 mixin( polymer 2)设计纸张输入的样式？

Question

我正在尝试根据我得到的设计来设置纸张输入的样式。我使用了描述的一些自定义属性 here ，但并非所有这些都有效。

我在使用 --paper-input-container-label 和 --paper-input-container-input-focus 时遇到问题。

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

这是我的代码

<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，这没有意义。如果你想要设置颜色样式。