Css 如何单独设置角度材质组件的样式？

我在一个组件中使用了两个角度材质形状组件：

密码


密码

试试下面的方法

HTML

---

您可以在CSS中使用指令：：ng deep来设置子组件的样式

---

但是在您的上下文中，输入是组件的一部分，因此您可以使用

mat表单字段输入[matInput]{}

选择它。如果您想避免：：ng deep，您可以在

style.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>

---

您可以使用

[NgClass]

指定一个类来替代材质样式。或者，也许你可以试试

[NgStyle]

，但我相信ovverride需要

！重要信息

，请参见结尾。此外，如果您不希望这些更改反映在其他任何地方，则由您添加

/deep/

。两个文本字段中的标签在未聚焦时仍应显示“黑色”。一旦聚焦，第一个应该显示蓝色，第二个应该显示黑色。如何定义一个垫子主题呢。您可以对其进行全局定义，也可以针对某个集装箱进行定义。它不起作用。当两个文本字段都未聚焦时，它会更改标签文本颜色。已更新我的答案。试试这个。现在应该可以了。你可以参考我创建的示例。谢谢@Hardick，但是我希望通过类名来选择，我已经尝试过：：ng deep.mat-form-field-can-float.mat-form-field-should-float.mat-form-field标签{color:blue；}，但是它全局地为项目中的每个表单输入字段应用样式。我需要单独应用这些样式。我不使用角度材质主题，因为它们也应用于全局。这是正常的，将一个类添加到

mat-form-field

或

input[matInput]

并选择它，它应该如下所示：

：：ng deep-mat-form-field.input-blue.mat-form-field-can-float.mat-form-field-should-float.mat-form-field-field标签{color:blue；}

ng deep

将在Angular的未来版本中被弃用。请继续使用：：ng deep及其替代品，直到创建替代品。感谢@MartinPaucot。您的建议进行了轻微更改。：：ng deep.input-blue.mat-form-field-can-float.mat-form-field-should-float.mat-form-field标签{颜色：蓝色；}非常感谢

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;
}

  <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>

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