如何自定义特定垫子徽章的颜色？

Question

我有两个Matbadges，我想要一个红色和黄色。对于红色的我正在使用：= 0“ matBadge =” {{element.failedTests}}“ matBadgeColor =” warn“>

对于另一个，我无法从默认的matBadgeColor值中找到黄色。如何自定义？

Answer 1

如果使用物质主题：深紫色琥珀色要获得黄色，您需要matBadgeColor="accent"

Answer 2

Tbh。我不是Angular Materials的忠实拥护者，因为它们比自己创建的组件受更深的锁。当然，有一些方法可以覆盖这些样式，但是我个人认为这只是一个令人讨厌的工作流程。

自发地想到3种可能，可以实现您想要的目标：

• 用mbitson's Online Color-Editor for Angular Materials所需的调色板主题颜色创建自己的主题样式，并将其包括在自己的页面中。

• 创建您自己的徽章组件！我认为这是最佳选择，因为您可以保留您的组件可以随需应变。例如实施和更改自制组件的颜色比更改组件要容易得多由角材料提供的组件。

• 关闭视图封装并覆盖s / css中的badge类样式。此步骤要小心，更改未封装的颜色如果应用不当，组件也会改变其他非组件的颜色封装的元素，因为它们不再受作用域限制

如果我在你的位置，我将为徽章创建自己的组件。通过这种方式，使其更容易适应自定义更改（例如颜色等），并且有大量示例说明了如何使用纯css创建圆。请记住，还要检查能够支持较旧浏览器的旧技术。

希望有帮助！ （：