How to remove gray margin of mat-form-field when it contains mat-select and sits in mat-tab

Question

I am constructing a dropdown within a tab head, such as:

<mat-tab-group animationDuration="0ms" (selectedTabChange)="tabClick($event)">
  <mat-tab *ngFor="let tab of tabs;" label="{{tab.name}}">
     <ng-template mat-tab-label *ngIf="tab.type === 'group'">
       <mat-form-field appearance="fill" class="form-in-tab">
         <mat-select matNativeControl required (ngModelChange)="onSubTabSelected($event)" [(ngModel)]="_selected_sub_tab" class="dropdown-in-tab">
           <mat-option *ngFor="let sub_tab of tab.sub_tabs" [value]="sub_tab.name" class="option-dropdown-in-tab">
             {{sub_tab.name}}
           </mat-option>
         </mat-select>
       </mat-form-field>
     </ng-template>
  ......

In the styling file, I tried:

::ng-deep .form-in-tab{
  width: 300px;
  color: white;
  background-color: white;
  margin-bottom: -1.25em;
  padding: 0em 0 !important
}
.dropdown-in-tab{
  margin: 0px;
  padding-top: 12px;
  background-color: #FFFFFF;
}
.option-dropdown-in-tab{
  margin: 0px;
  padding-top: 12px;
  background-color: #FFFFFF;
}

The tab structure is very simple in the ts file:

class TabObj {
  name: string = '';
  type: string = 'group';
  sub_tabs: TabObj[] = [];
}
...

public tabs:TabObj[] = [];
...

Since the background of mat-tabs are all white, I want to make sure this mat-form-field+mat-select appears all white as well. However, it has this gray margin on top, left and right which are hard to remove. I tried margin: 0!important and padding: 0!important and others, it seem only margin-bottom: -1.25em is working a bit, although I need to push it further to -2.em.

Anyone knows how?