如何更改纸质徽章中标签的字体大小？答案

【问题标题】：How to change font-size of label in paper-badge?如何更改纸质徽章中标签的字体大小？
【发布时间】：2017-09-22 19:16:18
【问题描述】：

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-badge mixin 中看到我设置字体大小的尝试。那没有用，所以我尝试在 id CSS 选择器中设置字体大小。没有 --paper-badge-font-size mixin，这就是我不使用它的原因。

即使使用 !important 标记，我也可以在开发人员工具的样式选项卡中看到 font-size: 10px !important; 被覆盖并在 .paper-badge-0 #badge.paper-badge 下保持为 font-size: 12px;。当我取消勾选时，它会转到我在 CSS 选择器中设置的 10px。

有人知道覆盖默认字体大小的正确方法吗？

【问题讨论】：

试试!important，也许？
是的，我提到我试过了，但不知何故它被覆盖了。
检查网页检查器，它可能没有应用于正确的元素。
定位.paper-badge。
您可以回答自己的问题并将答案设置为已接受。所以每个人都知道这个问题已经得到了回答。（适合正在寻找解决方案的用户和想要提供帮助的用户）

标签： html css polymer paper-badge

【解决方案1】：

我在 TricksfortheWeb 的帮助下解决了这个问题。

我添加了这个 mixin

--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;
    }
}

【讨论】：