如果元素在角度内被触摸/聚焦/活动，如何更改材料表单字段的边框颜色。我试图通过覆盖材质CSS类来改变颜色并且也厌倦了创建我自己的CSS类但是这两种方式都不会影响元素。
/*my.component.html*/
<mat-form-field class="matFormField">
<mat-label>Name</mat-label>
<input matInput [formControl]="name" required>
</mat-form-field>
/*my.component.css*/
.matFormField:focus {
border-color: green !important;
color: green;
}
如果我理解正确你想做什么，你可以尝试使用focus-within。以下是应用您的代码的示例 html。
.mat-form-field {
border: 2px solid gray;
}
.mat-form-field:focus-within,
.mat-form-field:active,
.mat-form-field input:checked {
border-color: green;
color: green;
}<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<form>
<mat-form-field class="matFormField">
<mat-label>Name</mat-label>
<input matInput [formControl]="name" required>
</mat-form-field>
</form>
</body>
</html>如果我误解了，请告诉我，以便我研究另一种方法。