angularjs - 如何根据 Angular Material $mdToast 中的消息类型更改 Toast 的颜色？

Question

使用 $mdToast.simple().content("some test") 时，它会显示黑色的 toast。如何将该颜色更改为红色、黄色等，取决于错误消息的类型，例如错误、警告和成功。

类似的问题this .

Answer 1

通过指定主题有一种更简单的方法:

$mdToast.simple().content("some test").theme("success-toast")

在你的 CSS 中:

md-toast.md-success-toast-theme {
    background-color: green;
    ...
}

您可以合并消息类型来动态选择主题。

更新:正如 Charlie Ng 指出的那样，为了避免出现有关使用未注册的自定义主题的警告，请使用主题提供程序将其注册到模块中:$mdThemingProvider.theme("success-toast")

另一个更新:有一个breaking change创建于 2015 年 12 月 2 日 (v1.0.0+)。您现在需要指定:

md-toast.md-success-toast-theme {
    .md-toast-content {
        background-color: green;
        ...
    }
}