聚合物設置紙張輸入字體系列

Question

如何為paper-input設置不同的字體系列。 當我在chrome中檢查元素時，它似乎從許多類中獲得了樣式。 不確定要覆蓋哪一個，也不確定-0在類中的含義。

Answer 1

Paper Input的樣式文檔委托其捆綁的Paper Input Container的樣式文檔 ，但它仍然沒有提供覆蓋字體樣式的方法。

幸運的是，您可以在paper-styles -container.html源代碼中查看它使用的字體，並在paper-styles / typography.html中覆蓋全局Material Design Typography，但我認為不鼓勵這樣做，因此他們沒有把它作為一種可定制的風格。

您拍攝的屏幕截圖的相應樣式如下：

paper-input-container.html ：

  .input-content ::content input,
  .input-content ::content textarea,
  .input-content ::content iron-autogrow-textarea,
  .input-content ::content .paper-input-input {
    position: relative; /* to make a stacking context */
    outline: none;
    box-shadow: none;
    padding: 0;
    width: 100%;
    max-width: 100%;
    background: transparent;
    border: none;
    color: var(--paper-input-container-input-color, --primary-text-color);
    -webkit-appearance: none;
    text-align: inherit;
    @apply(--paper-font-subhead);
    @apply(--paper-input-container-input);
  }

paper-styles / typography.html ：

--paper-font-common-base: {
  font-family: 'Roboto', 'Noto', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* [...] */

--paper-font-subhead: {
  @apply(--paper-font-common-base);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
};

無論如何， -0前綴只是一個索引。 如果您有兩個相同類型的聚合物元素，它將在第一個上放置-0前綴，在第二個上放置-1前綴。 我不確定，但我猜他們已經使用updateStyles將它們翻譯成了CSS選擇器，因為你可以通過JavaScript單獨自定義每個元素，因此在翻譯時可以單獨命名每個元素:root和::content關鍵字。

因此，如果要覆蓋此特定元素，我會告訴您使用-0前綴，否則使用更通用的類或元素以一般方式正確選擇。