アングル材質のデザイン - カスタムボタンの色を追加する

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 = "asset"最も広くすべての画面とコンポーネント間で使用される色：

テーマ主要パレット

• 異なる色でのみ次の項目を有することができます。
• アクセントパレット：フローティングアクションボタンとインタラクティブな要素に使用される色。
• 警告パレット：エラー状態を伝えるために使用される色。
• フォアグラウンドパレット：テキストとアイコンの色。
• 背景パレット：要素の背景に使用される色。それはマット成功 'のような、その値を持つクラスを生成

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

  以下のようにあなたは、その後

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

  そのクラスのCSSを作成し、任意の色を追加することができます

Answer 2

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

注：コンポーネント・レベルでのスタイルシートの参照を宣言する。 LIVE DEMO

Answer 3

Answer 4

Thiアンサンブルはアンギュラ/クリ（angi）/角張った材質を使ったアンギュラント5.1.1プロジェクトの文脈の中にあります。

マットは親から色を継承しているようですので、スパンやdivで囲んで色を塗りつぶすと落ちるはずです。私の特定のユースケースでは、アイコンの色を動的に設定したかったのです。私たちの初期実装と新しい実装は以下の通りです。

このクラスの割り当ては、mat-iconクラスをオーバーライドします。この使用は動作することが表示されますが、もうしません：

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

は今、あなたはラップすることができます：希望しないが、何のアイコンとして

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

言葉「アイコン名」への最初のケースのリードが着色します。 2番目のケースは、望ましい動作につながります。