Question

源代码中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;
}

您可以看到我在注释掉的纸张徽章mixin中设置font-size的尝试。这没用，所以我尝试在id CSS选择器中设置font-size。没有--paper-badge-font-size mixin，这就是我不仅仅使用它的原因。

即使使用！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;
    }
}

如何在纸牌中更改标签的字体大小？

1 个答案: