Mat-form-field outline color and size change

Question

I have a mat-form-field with a date range picker in Angular 16.I am try to change the color and size of the input but having a hard time.Can anyone assist please ? Here is my code :

  <div class="datePicker">
    <mat-form-field appearance="outline">      
      <mat-date-range-input [rangePicker]="picker">
        <input matStartDate placeholder="Start date">
        <input matEndDate placeholder="End date">
      </mat-date-range-input>    
      <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-date-range-picker #picker></mat-date-range-picker>
    </mat-form-field>
  </div>

I have tried the following in my SCSS,but it didnt work

.mat-form-field-outline {
  height: 30px;
}
.mat-form-field-appearance-outline .mat-form-field-outline {
  color: gray;
}
.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
  color: gray;
}
.mat-form-field-appearance-outline .mat-form-field-infix {
  padding: 0em 0 0em 0;
}

Answer 1

To access/override material provided css, you have to use ::ng-deep. Ex:

::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
  padding: 0em 0 0em 0;
}

It isn't really a recommended way of fixing things but it is usually pretty effective. If anything uses parts then you can access the shadow-dom selector using div::part(partName).