Angular 如何定制特定垫子徽章的颜色？

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

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

---

如果使用材质主题：深紫色琥珀色

---

要获得黄色，您需要

matBadgeColor=“accent”

Tbh。我不太喜欢棱角材质，因为它们比自创组件受到更深的锁定。当然，有办法覆盖这些样式，但我个人认为这只是一个令人讨厌的工作流程

我想到了三种可能，它们可以实现你想要的：

使用调色板主题颜色创建您自己的主题样式，这些调色板主题颜色是您希望使用的角度材质颜色编辑器之一：

创建您自己的徽章组件！ 我认为这是最好的选择，因为你可以 组件的动态性取决于您的需要。例如，实现和 更改自制组件的颜色比更改颜色容易得多 由角材料提供的部件

关闭视图封装并覆盖s/css中的徽章类样式。 在这一步中要小心，更改未封装的颜色 如果应用错误，组件也会更改其他非组件的颜色 封装元素，因为它们不再限定范围

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

---

希望对您有所帮助！（：

您可以使用以下css样式来实现这一点

.mat-badge-content {
    background: red;
    color: blue;
}

---

来自@nipun kavishka的答案已经足够好了

但是，如果您想让材料在任何地方都使用您的公司颜色，请查看角度主题页面，该页面有关于如何创建您自己的主题的说明：

---

例如，您可以在这里定义每个组件的“主”颜色，这样您就不需要在CSS中以材质类为目标，例如

.mat-badge-content

，如果您想覆盖现有的材质颜色，那么我使用它：

TypeScript

@Component({
...
  encapsulation: ViewEncapsulation.None,
...
})

HTML

<div matBadge="10" matBadgeColor="primary">
<div matBadge="99" matBadgeColor="accent">
<div matBadge="@" matBadgeColor="custom">

    [matBadgeColor=primary]{
        .mat-badge-content{
            background : #05a3ff;
            color: #fff;
        }
    }
    
    [matBadgeColor=accent]{
        .mat-badge-content{
            background : #69ff05;
            color: #fff;
        }
    }

    /** CUSTOM **/
    [matBadgeColor=custom]{
        .mat-badge-content{
            background : #c6c6c6;
            color: #fff;
        }
    }