Html 如何在单独页面中的mat表单字段上应用两种不同的CSS？

我在一页上有mat表单字段：-

<mat-form-field class="form-control-full-width">
    <input type="text" matInput placeholder="First Name"  formControlName="firstNameFC" required>            
    <mat-error *ngIf="hasNewUserError('firstNameFC', 'required') && isNewUserSubmitted">
               First Name is required
    </mat-error>
</mat-form-field> 

CSS正在按预期进行反映

问题是我在不同的页面上有另一个mat表单字段，希望在该字段上应用不同的CSS（颜色：绿色，背景颜色：白色）

---

是否可以在不同页面的控件上应用不同的CSS？

是的，您可以将它们添加到每个组件的CSS文件中，如下所示：

:host ::ng-deep .mat-form-field-label {
    color: white;
}

---

是的，只需创建一个名为liketextfield.css的单独文件即可

将其导入您的样式.css中

@import 'globalcss/textfield.scss';

将该文件放在globalcss文件夹中，使该文件夹位于src so下

src=>globalcss=>textfield.scss

现在，您可以使用任何matInput，只需添加类似于小文本字段的样式，请参见下面添加的类

 <mat-form-field class="small-text-field"> 
              <input matInput placeholder="Username">
            </mat-form-field>

因此，在整个应用程序中，无论您在哪里有matInput，如果您应用这个类，它都将被添加，但请注意，现在ng:：deep已被弃用，请在ts文件中使用以下指令作为

封装：视图封装。无

这将在内部使用

@Component({selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
encapsulation: ViewEncapsulation.None})

---

我希望这是一个更好、更清晰的解释，也是可以理解的

谢谢。我理解你的方法，但无法得到结果。我正在使用style.css。现在我删除了这些行并添加了login.component.css文件。我还添加了样式URL:['./login.component.css']，但它没有反映css。知道它为什么不起作用吗？还有什么要做的吗？

.mat-form-field.smallTextfield .mat-form-field-wrapper{
    font-size: 10px;
    width: 125px;
}

@Component({selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
encapsulation: ViewEncapsulation.None})