如何更改紙質徽章中的標籤字體大小？

源代碼中paper-badge標籤的字體大小爲12px。我想製作一個特殊的紙張徽章元素，使其具有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徽章混入設置字體大小的嘗試。這沒有奏效，所以我嘗試在CSS選擇器中設置字體大小。沒有--paper-badge-font-size mixin這就是爲什麼我不使用它。

即使使用！重要標籤，我可以在我的開發人員工具的「樣式」選項卡中看到font-size: 10px !important;被覆蓋並保留爲font-size: 12px;在.paper-badge-0 #badge.paper-badge之下。當我解決這個問題時，它會轉到我在CSS選擇器中設置的10像素。

有誰知道覆蓋默認字體大小的正確方法？

來源

2017-04-25 Drew

嘗試'！重要'，也許？ – TricksfortheWeb

是的，我提到我嘗試過，但不知何故它被覆蓋。 – Drew

檢查網絡檢查器，它可能不適用於正確的元素。 – TricksfortheWeb

我在TricksfortheWeb的幫助下計算出來的。

添加此混入

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

到paper-badge選擇器。所以現在看起來是這樣的：

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

來源

2017-04-26 16:42:36 Drew

如何更改紙質徽章中的標籤字體大小？

回答

相關問題