聚合物设置纸张输入字体系列

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前缀，否则使用一个更通用的类或元素来以一般的方式正确选择。