html - 如何更改纸徽章中标签的字体大小？

Question

paper-badge标签的字体大小在源代码中是12px。我想制作一个特定的 paper-badge 元素，使其字体大小为 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 混合，这就是为什么我不使用它。

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

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

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