ポリマーセットの紙入力フォントファミリ

Question

paper-inputに異なるフォントファミリを設定するにはどうすればよいですか？クロムの要素を調べると、多くのクラスからスタイルを取得するようです。どのクラスをオーバーライドするのかわからない、クラス内で-0が何を意味するのか。そのバンドルPaper Input Container's styling documentationへ

Answer 1

Paper Input'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プレフィックスがちょうどある

あなたが撮ったスクリーンショットのための対応するスタイルは以下のとおりです。インデックス。同じ種類のポリマー要素が2つある場合は、最初の要素に接頭辞-0を置き、2番目の要素に接頭辞-1を置きます。私は確信していませんが、updateStylesを使用してCSSセレクタに翻訳されていると思います。:rootと::contentの各キーワードを翻訳する際に、各要素を個別に名前空間にするのに役立ちます。

この特定の要素を上書きする場合は、-0接頭辞を使用するように指示します。そうでない場合は、一般的な方法で適切に選択するために、より汎用的なクラスまたは要素を使用します。