Как применить два разных CSS в поле mat-form на отдельных страницах?

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, см. класс, добавленный ниже

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

Я надеюсь, что это гораздо более лучшее и ясное объяснение, вполне понятное..!!