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

Question

如何爲paper-input設置不同的字體系列。當我檢查鉻中的元素時，它似乎獲得了許多類的樣式。不確定哪一個可以重寫，在一個類中，-0是什麼意思。

Answer 1

Paper Input's styling documentation代表它捆綁Paper Input Container's styling documentation，但它仍然沒有提供一種方式來覆蓋的字體樣式。

幸運的是，你可以看到哪些字體，它使用的paper-input-container.html source code和paper-styles/typography.html覆蓋全球材料設計排版，但我認爲這是不鼓勵這樣做，因此他們並沒有把它作爲一個可定製的風格。

你把截圖對應的樣式如下：

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。我不確定，但我猜他們已被翻譯成CSS選擇器，使用updateStyles，因爲您可以通過JavaScript分別自定義每個元素，所以它有助於單獨命名空間每個元素，同時翻譯:root和::content關鍵字。所以，如果你想覆蓋這個特定的元素，我會告訴你使用-0前綴，否則使用一個更通用的類或元素來以一般的方式正確選擇。