角度材料設計 - 添加自定義按鈕顏色

Question

我想添加自己的自定義顏色，類似於「主要」，「警告」等。 例如，我爲橙色背景添加了一個類，但是我將它用作類而不是顏色屬性。它的工作原理，但代碼看起來很混亂。

<button md-raised-button color="primary" class="btn-w-md ml-3 orange-500-bg"><i class="material-icons">description</i> Deactivate</button> 

我需要做什麼才能添加color="orange"？

Answer 1

您可以通過定義背景色橙類並將其作爲類屬性更改按鈕的顏色只有在正常的CSS方式。

如果您需要將它用作color =「orange」。然後你需要用你需要的顏色創建你自己的主題。請參閱Theming your angular material app關於如何操作。你甚至可以爲每個元素定製它。通過customisation您可以根據元素選擇不同的主題

但您仍然無法使用它，如color =「orange」，您可以將orange定義爲主要或資產顏色，並將其用作color =「primary」或顏色=「資產」根據您的需要。

主題只能有下列項目具有不同顏色

• 初級調色板：顏色在所有屏幕和組件最廣泛使用的。
• 重音調色板：用於浮動動作按鈕和交互式元素的顏色。
• 警告調色板：用於傳達錯誤狀態的顏色。
• 前景調色板：文本和圖標的顏色。
• 背景調色板：用於元素背景的顏色。

Answer 2

使用樣式表在在組件級別的引用

.mat-button, .mat-raised-button{ 
    background-color:red; 
} 

注：聲明在組件級別的樣式表的參考。 LIVE DEMO

Answer 3

您可以添加任何顏色像下面

<a mat-mini-fab [color]="'success'" routerLink=".">link</a>

它像 '墊成功' 該值生成類，那麼該類

.mat-success { 
 
    background-color: green; 
 
    color: #fff; 
 
}

創建CSS

Answer 4

Thi s的答案是在使用角/ cli和角材料5.1的角5.1.1項目的情況下。

mat -...似乎從父項繼承它的顏色，所以如果你用span或div包圍並在那裏應用顏色，它應該會穿透。在我的特殊用例中，我們想動態設置圖標的顏色。下面是我們最初的實施和新的實施。

這個類的任務將覆蓋mat-icon類。看來，這種利用工作，但沒有了：

<mat-icon [class]="custom-class">icon name</mat-icon> 

現在你可以用：

<span [class]="custom-class"><mat-icon>icon name</mat-icon></span> 

第一種情況導致的話「圖標名稱」五色根據需要，但沒有圖標。第二種情況導致期望的行爲。