The Color of Mat-Date picker is not working

Question

This is the My Mat- Date picker wrapped inside the mat-form i cant change the color from white smoke to actual white . how to achieve this i have tried soo many methods still not working

this is my code in angular

<div class="grid-item">
    <mat-form-field   class="form" >
      <input  matInput [matDatepicker]="dp" (dateChange)="dateChange($event.target)" [formControl]="serializedDate" class="dateinput" >
      <mat-datepicker-toggle  matIconSuffix [for]="dp"></mat-datepicker-toggle>
      <mat-datepicker  #dp></mat-datepicker>
    </mat-form-field>
  </div>

and my css for the respective item and form field

    .grid-item {
    flex: 1;
   /* width: 12%; */
    margin-bottom: 20px;
    padding: 10px;
   }
    .form {
    height: 40%;
   width: 90%;
   
  }
    .dateinput{
    
    width: 85%;
     }

How to make this container all white not white smoke

Answer 1

You can use this rule to override the default whitesmoke background-color.

:host ::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled) {
    background-color: white;
}

Read more about ::ng-deep and :host here: What to use in place of ::ng-deep