在角度材料中添加自定义颜色变量 (2+) [英] Add custom color variables in angular material (2+)

问题描述

如何为角度材料创建自定义"自己的颜色?

How to create "custom" own colors for angular material?

例如像 success(绿色)、warn(黄色)、danger(红色)等颜色的 bootstrap，在 旁边主要(蓝色)，accent(粉红色).

For example the bootstrap like colors like success (green), warn (yellow), danger (red), beside primary (blue), accent (pink).

换句话说:扩展 Angular Material (2+) 的颜色变量n，以便在 html 属性中使用它:

In other words: Extend the color variablen of Angular Material (2+) for using it in html attributes:

<button mat-raised-button color="success">Success</button>

或创建一个白色的复选框，如:

or create a white checkbox like:

<mat-checkbox color="white">Check me!</mat-checkbox>

推荐答案

要添加名为 success 的新颜色，请进行以下更改

To add a new color named success, make the following changes

在你的主styles.css文件中添加以下样式

Add the following styles in your main styles.css file

.mat-success {
  color: #fff !important;
  background-color: #28a745 !important;
}
.mat-success[disabled] {
  background-color: rgba(0, 0, 0, 0.12) !important;
}

在组件中指定颜色名称

 <button mat-raised-button color="success">

这篇关于在角度材料中添加自定义颜色变量 (2+)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！