如何單獨設置Angular材質組件的樣式？

Question

我在一個組件中使用兩個Angular材質表單組件：

 <!-- First input --> <mat-form-field> <mat-label>Password</mat-label> <input matInput type="text"> </mat-form-field> <br> <!-- Second input --> <mat-form-field> <mat-label>Password</mat-label> <input matInput type="text"> </mat-form-field> 

在集中這些輸入字段之前，他們應該看一下

當第一個輸入mat-label聚焦並且標簽浮在左上角時，我需要藍色。

對於第二個輸入墊標簽，我想要黑色

誰能幫我實現這個目標？ 非常感謝

Answer 1

試試以下。

HTML

 <!-- First input -->
<mat-form-field class="first">
    <mat-label>Enter task 1</mat-label>
    <input matInput type="text">
</mat-form-field>

<br>

<!-- Second input -->
<mat-form-field class="second">
    <mat-label>Enter task 1</mat-label>
    <input matInput type="text">
</mat-form-field>

CSS

mat-form-field.mat-focused:first-child mat-label{
  color:rgb(0, 255, 55);
}


mat-form-field.mat-focused:last-child mat-label{
  color:red;
}

Answer 2

您可以在CSS中使用指令:: ng-deep來設置子組件的樣式。

但是在您的上下文中， 輸入是組件的一部分，因此您可以使用mat-form-field input[matInput] {}

Answer 3

如果要避免:: ng-deep ，可以在styles.css應用樣式

  <mat-form-field class="">
    <input matInput placeholder="Favorite food" value="Sushi">
  </mat-form-field>
  <br>
  <mat-form-field class="red-float">
    <input matInput placeholder="Favorite food" value="Sushi">
  </mat-form-field>

styles.css的：

.red-float.mat-focused label{
  color:red !important;
}

演示