1

我在一页上有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？

4

2 回答 2

1

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

:host ::ng-deep .mat-form-field-label {
    color: white;
}
于 2020-04-23T06:45:23.980 回答
0

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

将其导入您的style.css中

@import 'globalcss/textfield.scss';

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

src=>globalcss=>textfield.scss

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

 <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 如果你应用这个类，它就会被添加，但请注意，现在 ng::deep 已被弃用，使用 ts 文件中的以下指令作为

封装：ViewEncapsulation.None

这将在里面使用

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

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

于 2020-09-07T12:04:07.723 回答