如何单独设置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;
}

Demo