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

Question

如何为paper-input设置不同的字体系列。当我在chrome中检查元素时，它似乎从许多类中获得了样式。不确定要覆盖哪一个，以及-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前缀。我不确定，但我猜他们已经使用updateStyles将它们翻译成了CSS选择器，因为您可以通过JavaScript单独自定义每个元素，因此在翻译{{1}时单独命名每个元素是有帮助的。 }和:root关键字。

因此，如果你想覆盖这个特定的元素，我会告诉你使用::content前缀，否则使用更通用的类或元素来正常选择。