紙バッジのラベルのフォントサイズを変更するにはどうすればいいですか？

Question

紙バッジのラベルのフォントサイズはソースコードで12ピクセルです。私は特定の紙バッジ要素を10pxのフォントサイズにしたいと考えています。要素は次のようになります。

<paper-badge id="unreadCount" for="myIcon" label="[[count]]"></paper-badge> 

関連するCSSは次のようになります。

paper-badge { 
    --paper-badge-background: #DC5E13; 
    --paper-badge-width: 14px; 
    --paper-badge-height: 14px; 
    --paper-badge-margin-left: 4px; 
    /*--paper-badge-margin-top: 6px;*/ 
    /*--paper-badge { 
     #badge { 
      font-size: 10px; 
     } 
    }*/ 
} 

#unreadCount { 
    font-size: 10px !important; 
} 

あなたはコメントアウト--paper-バッジミックスインでフォントサイズを設定する私の試みを見ることができます。それはうまくいかなかったので、私はid CSSセレクタでfont-sizeを設定しようとしました。 --paper-badge-font-sizeミックスインはありません。私はなぜそれを使用しないのですか？

重要なタグを使用しても、私の開発者ツールの[スタイル]タブでfont-size: 10px !important;が上書きされ、.paper-badge-0 #badge.paper-badgeの下にfont-size: 12px;と表示されます。これをアンロックすると、CSSセレクタで設定した10ピクセルに移動します。

誰かが正しいフォントサイズを上書きする正しい方法を知っていますか？

Answer 1

私はTricksfortheWebの助けを借りてそれを理解しました。

Iはpaper-badgeセレクタにこのミックスインを

--paper-badge: { 
    font-size: 10px; 
} 

を加えました。だからこれは次のようになります：

paper-badge { 
    --paper-badge-background: #DC5E13; 
    --paper-badge-width: 14px; 
    --paper-badge-height: 14px; 
    --paper-badge-margin-left: 4px; 
    --paper-badge: { 
     font-size: 10px; 
    } 
}