如何在单独页面的 mat-form-field 上应用两个不同的 CSS？

Question

我在一页上有 mat-form-field:-

<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-form-field-label {
    /*change color of label*/
    color: white !important;
  }

  .mat-form-field-underline {
    /*change color of underline*/
    background-color: white !important;
  } 

  .mat-form-field-ripple {
   /*change color of underline when focused*/
    background-color: white !important;;
  }

  .mat-input-element{
    color: white !important;
  }

CSS 符合预期。

问题是我在不同的页面上有另一个 mat-form-field，我想在该字段上应用不同的 CSS（颜色：绿色，背景颜色：白色）。

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

Answer 1

是的，您可以像这样将它们添加到每个组件的 css 文件中：

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

Answer 2

是的它可能只是创建一个单独的文件，名为 textfield.css

将其导入您的 style.css 赞

@import 'globalcss/textfield.scss';

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

src=>globalcss=>textfield.scss

现在您可以采用任何 matInput 并添加类似 small-text-field 的样式，请参阅下面添加的 class

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

textfield.css 文件中的内容如下

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

所以在整个应用程序中，只要你有 matInput，如果你应用这个 class 它将被添加，但请注意，截至目前 ng::deep 已被弃用，请在 ts 文件中使用以下指令作为

封装：ViewEncapsulation.None

里面会用到这个

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

我希望这是更好更清楚的解释，也很容易理解..!!

如何在单独页面的 mat-form-field 上应用两个不同的 CSS？

How to apply two different CSS on mat-form-field in separate pages?

html

css

angular-material

angular

mat-form-field